Add Content to a New Open Window

Open window in JavaScript with HTML inserted

You can use window.open to open a new window/tab(according to browser setting) in javascript.

By using document.write you can write HTML content to the opened window.

Add content to a new open window

in parent.html:

<script type="text/javascript">
$(document).ready(function () {
var output = "data";
var OpenWindow = window.open("child.html", "mywin", '');
OpenWindow.dataFromParent = output; // dataFromParent is a variable in child.html
OpenWindow.init();
});
</script>

in child.html:

<script type="text/javascript">
var dataFromParent;
function init() {
document.write(dataFromParent);
}
</script>

How to open a new window and insert html into it using jQuery?

Here's an example to open a new window with content using jQuery

<script>
function nWin() {
var w = window.open();
var html = $("#toNewWindow").html();

$(w.document.body).html(html);
}

$(function() {
$("a#print").click(nWin);
});​
</script>

<div id="toNewWindow">
<p>Your content here</p>
</div>

<a href="javascript:;" id="print">Open</a>​

EDIT:
For those who say that this code doesn't work, here's a jsfiddle to try it http://jsfiddle.net/8dXvt/

How to update a text in a new opened window through JQuery/JavaScript

You need to change your approach to adding content to the new window. The following works;

function nWin(p) {
var setStyle = "<style rel='stylesheet'>\
.vTop {\
vertical-align: top;\
}\
<\/style>";
var setScript = "<script>alert('test');<\/script>";
setScript += "<script src='http://code.jquery.com/jquery-1.11.0.min.js'><\/script>";
setScript += "<script>(function () { $('#sText').html('UPDATED TEST'); })();<\/script>";
var w = window.open();
w.document.write('<head>');
w.document.write(setStyle);
w.document.write('</head><body>');
w.document.write("<span id='sText'>THIS IS A TEST</span>");
w.document.write(setScript);
w.document.write('</body>');
}

See this Fiddle

reach content of new window.open

Please use the below code to fix it in IE

var content = $('#content');

$('#open').on('click', function () {

var win = window.open("", "", "width=400, height=200");
$newWindow = $(win.document.body);
$newWindow.html(document.getElementById("content").innerHTML);
$newWindow.find('#close').on('click', function () {
win.close();
});
});

or use:

var content = $('#content');

// and then
$newWindow.html(content);

How to write JavaScript in a new window (window.open())?

Mark -

The example below works, provided popups are not blocked. This is just one of many ways you could do this. Note that it calls the function in the parent window using "opener" and then changes the font size of the body. Your code is trying to set the font size of document, which is not what you want, i.e., it won't do anything. Also note that fontSize is case sensitive and that if you use "fontsize" nothing will happen. Lastly, don't use percents when setting body font size as it will not work as you might expect. Instead use px (pixels). Anyway, this should be enough to get you going and I'll leave the details to you.

<html>
<body onload="init()">
<h2>Parent Window</h2>
<script type="text/javascript">

var popup;

function init() {
popup = window.open("", "newWindow", "width=800, height=600");
if (popup) popup.document.write('<html><body>Child Window<br><button onclick="opener.fontSize(48)">Test</button></body></html>');
}

function fontSize(size) {
popup.document.body.style.fontSize = size + 'px';
}

</script>
</body>
</html>

Can I open a new window and populate it with a string variable?

Yes it's possible...

var wnd = window.open("about:blank", "", "_blank");
wnd.document.write(html);

That should do the trick.

Append to window.open()

Considering that http://mypage.aspx is a valid page path, it will take time to load so playing with the document right at the start might not be a good idea. It could also be why it does not seem to get loaded.

var w = window.open("http://mypage.aspx", "_parent", "width=800,height=800");
w.onload = function(){this.document.body.innerHTML+="<input type='checkbox' id='IsConfirmed' />";};

Using onload on the window will make sure that you are appending the checkbox after the page has been fully loaded... This will prevent some errors.



Related Topics



Leave a reply



Submit