Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

javascript window.open from callback

window.open() called from main thread opens new tab by default.

But, here open new window every time (Opera 16 and Google Chrome 29)

<input type="button" value="Open" onclick="cb1()">

<script type="text/javascript">  
function cb1() {
    setTimeout(wo, 1000); //simple async
}

function wo()
{
   var a = window.open("http://google.com", "w2");
   a.focus();
}
</script>

(lol, this is my answer for Open a URL in a new tab (and not a new window) using JavaScript).

How I can open in the tab (by browser default) here?

like image 220
zardoz Avatar asked Sep 26 '13 10:09

zardoz


People also ask

How do I open a pop up window?

The syntax to open a popup is: window. open(url, name, params) : url. An URL to load into the new window.

What does window Open return in JavaScript?

When window.open() returns, the window always contains about:blank . The actual fetching of the URL is deferred and starts after the current script block finishes executing. The window creation and the loading of the referenced resource are done asynchronously.

How do I return a value from a Windows Open?

returnValue = true; window. close();


2 Answers

We ran across this same problem and hunted around SO for an answer. What we found works in our circumstances and the distilled wisdom is as follows:

The problem is related to browser pop-up blockers preventing programmatic window opens. Browsers allow window opens from actual user clicks which occur on the main thread. Similarly, if you call window.open on the main thread it will work, as noted above. According to this answer on Open a URL in a new tab (and not a new window) using JavaScript if you are using an Ajax call and want to open the window on success you need to set async: false which works because that will keep everything on the main thread.

We couldn't control our Ajax call like that, but found another solution that works because of the same reasons. Warning, it is a bit hacky and may not be appropriate for you given your constraints. Courtesy of a comment on a different answer on Open a URL in a new tab (and not a new window) using JavaScript you open the window before calling setTimeout and then update it in the delayed function. There are a couple of ways of doing this. Either keep a reference to the window when you open it, w = window.open... and set w.location or open with a target, window.open('', 'target_name'), in the delayed function open in that target, window.open('your-url', 'target_name'), and rely on the browser keeping the reference.

Of course, if the user has their settings to open links in a new window this isn't going to change that, but that wasn't a problem for the OP.

like image 106
Yogh Avatar answered Oct 01 '22 08:10

Yogh


Like the other posts mentions the best way to do this is to first open the window and then set its location after the callback or asynchronous function

<input type="button" value="Open" onclick="cb1()">

<script type="text/javascript">

function cb1() {
  var w = window.open('', 'w2');
  setTimeout(function () {
    wo(w);
  }, 1000); //simple async
}

function wo(w)
{
  w.location = "http://google.com";
  w.focus();
}
</script>

Alternatively if you are using async await you will also have the same problem. The same solution still applies.

public async openWindow(): Promise<void> {
    const w = window.open('', '_blank');
    const url = await getUrlAsync();
    w.location = url;    
}

A further enhancement is to open the window on an initial page that provides some quick feedback either by loading a url or writing some html to that page

public async openWindow(): Promise<void> {
    const w = window.open('', '_blank');
    w.document.write("<html><head></head><body>Please wait while we redirect you</body></html>");
    w.document.close();
    const url = await getUrlAsync();
    w.location = url;    
}

This will prevent a user looking at a blank tab/window for however long it takes to resolve your URL.

like image 31
Darryn Hosking Avatar answered Oct 01 '22 09:10

Darryn Hosking