Links with external protocol in "new-window" event becomes "about:blank"

[CharlieHess]

I have an embedded webview that contains a link, like this:

<a target="_blank" href="skype:Charlie_Hess?call"></a>

And am trying to handle that link externally using the new-window event:

this.wv.addEventListener('new-window', (e) => {
  shell.openExternal(e.url);
});

Unfortunately, e.url in this case is just "about:blank" and the source element is the webview. So I don't have a simple way to get at the original href, and all of our protocol links are dead. Would it be reasonable to modify the new-window event to include more information (e.g., the source link)?

[zcbenz]

It looks like a bug to me.

[saenzramiro]

I think this came up again. Can anyone confirm?

[giancarlokc]

This happens to me. My app renders google drive inside an webview. When I click on the "print" button in the document preview, I get this as url: "about:blank"

[MaxShv]

Same here. I get "about:blank" as the url.

[merliecat]

I'm also seeing this bug.

Incidentally, if the user clicks the middle mouse button (linux at least) the new-window event issued from that action has the correct url listed.
But, telling users that if the link doesn't work they have to use the middle mouse button is, of course, not acceptable, so...

As a workaround for this issue, you can do the following: -

1. Add an onmousedown handler for the webview element. In the handler record the pointer x & y position, saving them to variables that you can reference from the new-window handler. We do this because the new-window event doesn't give us the pointer position and we'll need it.

    var clientX, clientY; // somewhere not local to the onmousedown handler

    //...

    // Inside the onmousedown handler
    clientX = event.clientX; clientY = event.clientY;
        // where 'event' is the parameter passed into the handler.

2. You've receive a new-window event, so in its handler you check the url: -
   • if it's a normal URL, Hurray!, do your normal thing;
   • if it's "about:blank", Boo!, go on to step 3.
3. The approach now is to interrogate the 'guest page' in the webview to grab the href from the link clicked by the user. To do this you'll need: -
   • the current pointer position in your renderer page, which we handily saved to clientX, clientY;
   • the webview bounding box, so we can calculate the x & y pointer position within the guest page;
   • the magic of injecting javascript into the guest page to execute document.elementFromPoint();
   • and that guy's false leg (no not really).
4. So here goes: -

    // inside (or called from) the new-window event handler.
    var wv = document.getElementById('my-webview');
    var bbox = wv.getBoundingClientRect();
    var guestPageX = clientX - bbox.left;
    var guestPageY = clientY - bbox.top;
    wv.executeJavaScript
        ("document.elementFromPoint(".concat(guestPageX, ",", guestPageY, ")['href']",
         false,
         (realURL) => {
              // do the normal thing with realURL, Hurray!
         });

This approach is working reliably for me, but, I need to declare here that I'm actually working in clojurescript within the re-frame framework inside electron. So, the above is a translation of what I'm doing, and is not my actual code -- caveat emptor!

[fragsalat]

This is actually still a problem. I tried to get with iohook the click coordinates and the anchor clicked but this doesn't work when the page is scrollable as iohook returns screenX and screenY but elementFromPoint needs pageX and pageY. Until now I couldn't find a solution for this problem.

Edit: This was rubber duck style. I found a way better solution at least for my use case. As the window.open function works properly I added an event listener to call window open when clicking links. On the new-tab event I only call openExternal when url is not blank or about:blank.

  win.webContents.on('dom-ready', function() {                                                                          
    const script = `document.addEventListener('click', event => {                                                       
      if (event.target.tagName === 'A') {                                                                               
        event.preventDefault();                                                                                         
        window.open(event.target.href);                                                                                 
      }                                                                                                                 
    });`;                                                                                                               
    win.webContents.executeJavaScript(script, false);                                                                   
  });                                                                                                                   
                                                                                                                        
  win.webContents.on('new-window', (event, url) => {                                                                    
    event.preventDefault();                                                                                             
    if (url && url !== 'about:blank') {                                                                                 
      shell.openExternal(url);                                                                                          
    }                                                                                                                   
  }); 

[mattpilott]

I'm still seeing this.

If i do something like:

webview.addEventListener('new-window', (e) => console.log(e.url))

I get about:blank rather than the actual url

[AnthonyConklin]

Really need to figure out how to resolve this issue. Any updates or workarounds? My specific case is a javascript triggered window.open() so i can't hijack the a link