Add content to a new open window

Question

I don't know how to solve this issue, I've trying reading many post but no one answer to it.

I need to open a new window with a page already coded (inside the same domain) and add some content.

The problem is that if I use OpenWindow.write() the page is not loaded yet or it overrides everything and only the code added through write appears.

var OpenWindow = window.open('mypage.html','_blank','width=335,height=330,resizable=1');
OpenWindow.document.write(output);

output is the code I need to append.

I need it to work at least on Firefox, IE and GC.

It is not a problem if I need to use JQuery.

I had tried as well: OpenWindow.addEventListener("onload", function () { OpenWindow.content.body.innerHTML = "
hello world
"; }, true); — Mario Corchero, May 06 '12 at 18:12
When you call the function in the child window, you can not pass anything in the function arguments. You must just call childWin.function_name(). If you call childWin.function_name(output), it won't work. For passing data from parent to child, see http://stackoverflow.com/questions/2678133/pass-a-value-from-parent-to-child-open-window — Ray Cheng, May 06 '12 at 19:04

iegik · Answer 1 · 2017-08-22T11:08:29.877

When You want to open new tab/window (depends on Your browser configuration defaults):

output = 'Hello, World!';
window.open().document.write(output);

When output is an Object and You want get JSON, for example (also can generate any type of document, even image encoded in Base64)

output = ({a:1,b:'2'});
window.open('data:application/json;' + (window.btoa?'base64,'+btoa(JSON.stringify(output)):JSON.stringify(output)));

Update

Google Chrome (60.0.3112.90) block this code:

Not allowed to navigate top frame to data URL: data:application/json;base64,eyJhIjoxLCJiIjoiMiJ9

When You want to append some data to existing page

output = '<h1>Hello, World!</h1>';
window.open('output.html').document.body.innerHTML += output;

output = 'Hello, World!';
window.open('about:blank').document.body.innerText += output;

My popup got blocked by chrome, then `document` didn't work because `window.open` was undefined. So make sure your popup is a direct result of a user action. For more read here: https://stackoverflow.com/questions/4602964/how-do-i-prevent-google-chrome-from-blocking-my-popup — Katie, Aug 21 '17 at 23:27

score 28 · Accepted Answer · answered May 06 '12 at 19:15

28

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>

answered May 06 '12 at 19:15

Ray Cheng

12,230
14
74
137

1

How to pass jquery variable/elemnts to child page from parent? @ray-cheng – Azad Sep 02 '15 at 04:32
How secure is this? You're not passing the data via the URL, but could there be an interception somewhere? – Diode Dan Dec 07 '17 at 05:40
it gives undefined function init() on OpenWindow. Google Chrome – Ali Faradjpour Aug 14 '18 at 09:00

Sethunath K M · Answer 3 · 2012-05-06T19:22:50.480

7

Here is what you can try

Write a function say init() inside mypage.html that do the html thing ( append or what ever)
instead of OpenWindow.document.write(output); call OpenWindow.init() when the dom is ready

So the parent window will have

    OpenWindow.onload = function(){
       OpenWindow.init('test');
    }

and in the child

    function init(txt){
        $('#test').text(txt);
    }

edited May 06 '12 at 19:22

answered May 06 '12 at 18:16

Sethunath K M

4,702
3
28
42

I get "OpenWindow.init is not a function" error and I had defined the function: – Mario Corchero May 06 '12 at 18:24
OpenWindow.init(); Is never executed :( Thanks anyway – Mario Corchero May 06 '12 at 19:12

TJ VanToll · Answer 4 · 2012-05-06T19:19:01.810

3

When you call document.write after a page has loaded it will eliminate all content and replace it with the parameter you provide. Instead use DOM methods to add content, for example:

var OpenWindow = window.open('mypage.html','_blank','width=335,height=330,resizable=1');
var text = document.createTextNode('hi');
OpenWindow.document.body.appendChild(text);

If you want to use jQuery you get some better APIs to deal with. For example:

var OpenWindow = window.open('mypage.html','_blank','width=335,height=330,resizable=1');
$(OpenWindow.document.body).append('<p>hi</p>');

If you need the code to run after the new window's DOM is ready try:

var OpenWindow = window.open('mypage.html','_blank','width=335,height=330,resizable=1');
$(OpenWindow.document.body).ready(function() {
    $(OpenWindow.document.body).append('<p>hi</p>');
});

edited May 06 '12 at 19:19

answered May 06 '12 at 18:50

TJ VanToll

12,584
4
43
45

It is not working, if I do it whilst debuging, the new window has time to load and the the "hi" is added, working everything fine, but in a normal situation, "hi" appears first, then the page is loaded overriding everthing :S Thanks for the help – Mario Corchero May 06 '12 at 19:07
I edited my answer to wrap the code in a $(document).ready block. Try that. – TJ VanToll May 06 '12 at 19:19
This didn't work for me, what did work was- $(printWindow).on('load', function () { $(printWindow.document.body).find('#page-content').html(printContent); }); – pwdst Oct 01 '13 at 10:25

score 2 · Answer 5 · answered Jan 15 '16 at 08:44

If you want to open a page or window with sending data POST or GET method you can use a code like this:

$.ajax({
    type: "get",  // or post method, your choice
    url: yourFileForInclude.php, // any url in same origin
    data: data,  // data if you need send some data to page
    success: function(msg){
                console.log(msg); // for checking
                window.open('about:blank').document.body.innerHTML = msg;  
               }
});

score 1 · Answer 6 · answered Feb 09 '22 at 14:24

1

it is even more simple!

Just put the code below in between the <head> </head> of your code and all of your links will open in a new window:

<base target="_blank">

answered Feb 09 '22 at 14:24

Marco Diversi

41
5

Add content to a new open window

6 Answers6

Linked