Writing html to a new window with javascript

Question

I have been doing some research on opening a new window and writting HTML to it with jQuery/JavaScript and it seems like the proper way to do it is to:

Create a variable for the new window

var w = window.open();

Insert the new data and work the variable

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

And to me, that makes complete sense. however when i try to incorporate this into my script ("data" being the holder for the HTML) it does not open a new window... unless I'm just missing something simple which as far as I can tell it looks great...

function newmore(str) {
    var identifier = 4;
    //get the history
    $.post("ajaxQuery.php", {
        identifier : identifier,
        vanid : str
    },
    //ajax query 
    function(data) {
        //response is here
        var w = window.open();
        $(w.document.body).html(data);
    });//end ajax                
}

Any ideas?

P.S. there seems to be no errors in the console

Solution 1

Your new window is probably being blocked by the popup blocker built into most browsers. If you create the new window as a direct result of a user action (key, click), then the browser usually will not block it. But, if you wait until sometime later (like after an ajax call completes), then it will get blocked and that is probably what is happening in your case.

So, the fix is usually to create the window immediately in direct response to the user event (don't wait until the ajax call completes), keep the window handle in a variable and then put the content in the window later after your ajax call completes.

function newmore(str){
    var identifier = 4;
    // create window immediately so it won't be blocked by popup blocker
    var w = window.open();
    //get the history
    $.post("ajaxQuery.php", {
        identifier : identifier,
        vanid : str
    },
    //ajax query 
    function(data) {
        //response is here
        $(w.document.body).html(data);

    });//end ajax                

}

Solution 2

Try instead:

var w = window.open();
w.document.write(data);

The "innerHTML" property of the document object (which is what jQuery's .html() uses) represents the HTML document, which a new window doesn't have. Even if it did, putting a complete document inside an HTML document doesn't really make sense. It's a freshly-created document, so you can just write to it.

Comments

[Nick]

Made no difference, the data came back from my ajax query but no new window to be found, i know everything works because i had the data changing the inner html of a div at one point, now im just trying to open a new window.

[Nick]

Frankly the way that works is just silly, however that was the problem. you would think i would have caught that right away :/ ill add those changes and it looks like that fixes ti right up. thanks :)

[jfriend00]

@Nick - yeah it's a pain, but it's also really hard for a browser to figure out what is and isn't an unwanted ad pop-up. The fault lies with the worst ad services that tried to wreck our browsing experience with these popups and caused the browsers to have to respond this way.

[Nick]

I see where it comes from, one person ruins it for everyone :) I could probably figure it out with more troubleshooting, but the code you gave opened a new tab but never wrote the data. any ideas whats up with that? sorry im a php native im struggling with jquery :p

[Nick]

I take that back, the data is being wrote. but it still opened in a new tab not window. not a huge deal though

[Ian]

@Nick You won't be able to control whether the new window is open as a tab or window - it's just not an ability of Javascript. It's determined by the browser's settings

[jfriend00]

@Nick - browser settings often determine whether a new window opens in a window or a tab.