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

Please don't use popup windows. They are usually annoying, even when opened on request - consider inline "windows" instead. — ThiefMaster, Feb 25 '13 at 15:07
It is for displaying the history for a company, believe me i didnt like it either, but then again i dont pay the bills. :) — Nick, Feb 25 '13 at 15:08

score 9 · Accepted Answer · answered Feb 25 '13 at 15:24

9

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                

}

answered Feb 25 '13 at 15:24

jfriend00

683,504
96
985
979

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 :) – Nick Feb 25 '13 at 15:28
3

@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. – jfriend00 Feb 25 '13 at 15:31
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 Feb 25 '13 at 15:33
I take that back, the data is being wrote. but it still opened in a new tab not window. not a huge deal though – Nick Feb 25 '13 at 15:34
1

@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 – Ian Feb 25 '13 at 15:35
@Nick - browser settings often determine whether a new window opens in a window or a tab. – jfriend00 Feb 25 '13 at 15:35

Pointy · Answer 2 · 2013-02-25T15:34:45.597

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.

edited Feb 25 '13 at 15:34

answered Feb 25 '13 at 15:10

Pointy

405,095
59
585
614

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 Feb 25 '13 at 15:19

score -1 · Answer 3 · answered Feb 25 '13 at 15:26

This peace of code will work:

var data = "<h1>Test</h1>";
var w = window.open("", "mywindow1", "width=350,height=150");
$(w.document.body).html(data);

You have to inform some parameters when opening new windows.

But, if possible, I'd hardly recommend that you use another way like, jquery UI or Twitter Bootstrap for doing that, so you will not be using pop-ups.

Writing html to a new window with javascript

3 Answers3