window.open affect web page

Question

I have a link that opens a new window using window.open. The pop up works fine, however the normal web page stops loading objects (images, scripts, ajax scripts) and sometimes the page doesn't load at all.

Here is my code:

MyWindow=window.open('player.php','Player','width=500','height=300'); return false;

Is there anything I am doing wrong?

Thanks, Peter

Answer 1

First of all, please be more specific: tell us more about your browser and which version, and possible your OS. It could be more related to the browser than to the web content.

Then on to the possible problem; you start with saying "I have a link that ...".

To me that sound like you use <a href="javascript:DoSomething()">. Or perhaps <a href="#" onclick="DoSomething()">.

I tried both in some modern browsers: Chrome v37, IE v11. Both browsers did not produce what you describe:
- Chrome v37 will happily keep on loading, even if I immediately click a "window.open()"-link on top of a (huge) webpage;
- IE v11 will someshow show "false", which is strange, but still not what you got.
In some cases I also got to deal with the popup blocker.

A general tip might be to NOT USE <a href> for things like this. Behaviour seems inconsistent across browsers, also these days there are better alternatives, such as <span onclick="">...</span> and <button onclick="">...<button> or by using JQuery or other frameworks (which I do not know much about).

Although this many not be a conclusive answer, maybe this can help you experiment on your own, and think about possible causes or alternative ways of doing things.

Answer 2

The behaviour you describe should definitely NOT normally happen. This is confirmed by robbmj's JSFiddle, that fails to reproduce the problem. That's evidence that something is going on in the main page that is not plain vanilla page loading, or your "link opening" has something unusual to it. Apart from the syntax error (you use four parameters, not three).

Since you do not supply information on either of these points (how do you load the main page? How do you trigger the popup-opening code?), we do not even know if the problem might be browser-related; I'd start and try to test things in IE, Chrome and Mozilla to see whether anything changes; this might provide some useful insights.

One possibility

A very strong possibility is that your inadvertent fourth parameter goes into the window.open() "replace" parameter, which is a boolean, and triggers undefined behaviour or simply an error that stops everything. You should have things somewhat working in IE and not working at all in Firefox.

You should also be able to see whether this is the case by using Firefox and the Firebug extension, or the Web Developer Console in Chrome.

Another possibility

A more esoteric possibility is that the way you define the link might make the browser believe you've actually moved on to another page, so that there's no point in continuing loading the current page. Depending on the browser, this might have to do with how the link is defined and could be remedied by defining it some other way.

For example it could conceivably happen if you had

<a href="javascript:openPopup();">...</a>

which I suspect is what led user Tomzan to ask, "is the link something like javascript:...?"

So if this is the case, try with this instead (this works for me in IE9/Chrome/FF):

<a href="#" onclick="return openPopup();">link</a>


function openPopup() {
    MyWindow = window.open('player.php', 'Player', 'width=500, height=300');

    // Also try the following. You won't probably like the results (it should send the
    // popup window behind), but if it works, it proves we're dealing with a browser
    // issue there.

    // Blur and refocus
    // MyWindow.blur();
    // window.focus();

    // Just focus
    // window.focus();

    return false;
}

Workaround

A possibly acceptable workaround could be to disable the link altogether (or hide it via CSS), and only reactivate/show it upon main document being ready. This sidesteps the problem, even if user experience could be somewhat worse due to a longer wait.

But if it's so likely that a user clicks on the link before waiting for the whole page to load, I'd also consider not automatically loading the rest of the page at all, and reorganize information to provide a more streamlined navigation. Or maybe distribute it on two sequential pages. Again, unfortunately you did not supply enough information to do more than guess.

Answer 3

As you probably know, JavaScript is single threaded. Every event is queued until there is idle time for it to be executed. In the case of window.open, both windows must share a single context to keep it thread-safe because the opened window can access to it's parent using window.opener. I don't know how browsers implements it, but we can guess two possibilities:

• Idle time is shared between the two windows. It means if the popup does many blocking statements, it can freeze the main window's events.

• Only one of the two windows can be active, which depends on which one has the focus. In that case, all events may be paused in the main window when you're using the popup.

  If you want a more precise answer, I need more details about your code.

Answer 4

document.addEventListener("DOMContentLoaded", function () {
      //whatever the code
      MyWindow=window.open('player.php','Player','width=500','height=300'); return false;
}, false);

Answer 5

Try to wrap the code in SetTimeout

setTimeout(function () {
    window.open( .. )
}, 0);

Answer 6

Your document should be loaded first, then popup should be open, So write your javascript code in the scope of $(document).ready().

    enter code here

$(document).ready(function(){
$("#clickme").click(function(e){
  MyWindow=window.open('player.php','Player','width=500','height=300'); return false;
});
});