43

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.

2
  • 1
    I had tried as well: OpenWindow.addEventListener("onload", function () { OpenWindow.content.body.innerHTML = "<div>hello world</div>"; }, true); Commented May 6, 2012 at 18:12
  • 1
    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 stackoverflow.com/questions/2678133/…
    – Ray Cheng
    Commented May 6, 2012 at 19:04

6 Answers 6

55

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;
1
  • 1
    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: stackoverflow.com/questions/4602964/…
    – Katie
    Commented Aug 21, 2017 at 23:27
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>
3
  • 1
    How to pass jquery variable/elemnts to child page from parent? @ray-cheng
    – Azad
    Commented Sep 2, 2015 at 4:32
  • How secure is this? You're not passing the data via the URL, but could there be an interception somewhere?
    – Diode Dan
    Commented Dec 7, 2017 at 5:40
  • it gives undefined function init() on OpenWindow. Google Chrome Commented Aug 14, 2018 at 9:00
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);
    }
2
  • I get "OpenWindow.init is not a function" error and I had defined the function: <script> function init(code) { $('#dummy').html(code); }</script> Commented May 6, 2012 at 18:24
  • OpenWindow.init(); Is never executed :( Thanks anyway Commented May 6, 2012 at 19:12
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>');
});
3
  • 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 Commented May 6, 2012 at 19:07
  • I edited my answer to wrap the code in a $(document).ready block. Try that.
    – TJ VanToll
    Commented May 6, 2012 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
    Commented Oct 1, 2013 at 10:25
2

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;  
               }
}); 
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">

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.