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
– ThiefMaster, Commented Feb 25, 2013 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
– Nick, Commented Feb 25, 2013 at 15:08

jfriend00 · Accepted Answer · 2013-02-25 15:24:46Z

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, 2013 at 15:24

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Nick Over a year ago

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 Over a year ago

@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 Over a year ago

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 Over a year ago

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 Over a year ago

@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

|

Pointy · Accepted Answer · 2013-02-25 15:34:45Z

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, 2013 at 15:34

answered Feb 25, 2013 at 15:10

Pointy

415k62 gold badges600 silver badges632 bronze badges

1 Comment

Nick Over a year ago

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.

thitemple · Accepted Answer · 2013-02-25 15:26:49Z

-1

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.

answered Feb 25, 2013 at 15:26

thitemple

6,0675 gold badges47 silver badges69 bronze badges

Collectives™ on Stack Overflow

Writing html to a new window with javascript

3 Answers 3

6 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related