Electron webview new-window event returning `about:blank` as Url

Question

I have a Electron based browser like application which uses Electron's tag to render client urls. I have my own custom tabs setup using multiple webview tags.

As mentioned in the electron documents, I was using the new-window event to handle page requests to open urls in a new tab. It could be requested by window.open or an external link like <a target='_blank'>.

My code which was working fine in most cases when the url is specified and not dynamically added later on.

const webview = document.querySelector('webview')

webview.addEventListener('new-window', (e) => {
  const url = e.url;
  // used url to render new tabs.
})

Lately i have a client login url which when loaded has a button. The button does not have an anchor tag and no predefined urls specified. When opened in chrome, the button click leads to external link opening in a completely new window. The new window briefly shows 'about:blank' in the url bar but then redirects to the actual url.
When i tried to intercept the same external url using new-window event in my electron webview, the event returned url which was about:blank and i couldn't access the redirected url. Has anybody else faced the same issue ?

Lipoid

Maybe you could do something with webview.addEventListener('did-stop-loading', loadstop) instead of immediatly looking for the url? Reference – Decline

I just tested this and it seems to work fine and give me the correct url. I tested here: Link. Can you try it out with that website? – Decline

I have edited my question a bit. The link you tested works fine in my case too but my problem is a bit different. The target url in my case is somehow only being added after the button is clicked and it opens in a new window. The new window briefly shows "about:blank" and then redirects to a different url. My new-window event however is triggered immediately after the button is clicked so the url i get is "about:blank". @Decline – Lipoid

I'm not able to test this due I have no website currently in mind that takes a bit time to load. Are you in any shape or form able to provide the website you need to access? – Decline

I'm having the same problem. Any updates so far? – Bundle

Answer 1

In my case, I was able to find the eventually-opened url by adding a will-navigate listener for the popup window's web-contents:

app.on("web-contents-created", (webContentsCreatedEvent, contents)=>{
    contents.on("will-navigate", function(e, reqUrl) {
        console.log(`Popup is navigating to: ${reqUrl}`);
    });
});

Deane

Answer 2

I had the same issue with a BrowserWindow and I solved by using the nativeWindowOpen flag (experimental at this time)

It is also available for webviews

https://electronjs.org/docs/all#using-chromes-windowopen-implementation

Chromatics

While this may help OP, it's better to add more details, explanation, examples, etc. And include the essential part of the link here. – Ridglee

Answer 3

I had the same issue and found some workaround, so want to share. It's a bit unreliable, but works for my purposes.

Firstly, I caught 'cursor-changed' event, got needed URL as lastViewedURL and saved for later

let lastViewedURL = "";
main.webContents.on('cursor-changed', (type) =>
{
  if (type == 'pointer') 
  {
    let code = ` 
    try {
      document.querySelector('#docs-linkbubble-link-text').innerHTML;
    } catch (error) { console.error(error);  }` ;
    
    try {
      main.webContents.executeJavaScript(code)
      .then((result)=> {
        lastViewedURL = result
    })
    } catch (error) {
      console.error(error)
    }
  }
}  )

Then used it, if current url in 'new-window' event is 'about:blank'

main.webContents.on('new-window', (event, url) => {
  let urlToOpen = url == 'about:blank' ? lastViewedURLInDocs : url;
  shell.openExternal(urlToOpen); 
  event.preventDefault()
})

Competence