[Solved] How to get URL's href for the link, when mouse hovers over it, from the page rendered in the webview?


#1

Once a webpage is rendered in the webview, whenever user hovers the mouse over the link in that webpage, I would like to know the link’s href value so I could display it in the status bar of the app window (like you would see in a web browser).

Is it possible to achieve it in an electron app? If so, please provide me some pointers as to how to implement it?


#2

You can get the href property of an <a> element with element.href. You can use the following to do what you’re describing:

var $ = require('jquery');

$('body').on('mouseenter', 'a', function() {
  updateStatusBarURL(this.href);
});

$('body').on('mouseleave', 'a', function() {
  clearStatusBarURL();
});

It requires jQuery for event delegation, but you can use another event delegation library if you want. You’ll also need some logic for when you move the mouse from a link to another link and updateStatusBarURL is called before clearStatusBarURL, thus causing the status bar url to be hidden even though you’re hovering a link…


#3

I was able to figure this out myself. Using preload attribute, you can inject javascript (inject.js shown below) into the webview. When mouse hovers over the href in the webview, the guest page will send ipc-message event to the renderer process’s host page.

renderer process

<html>
  <head>
  </head>
    <body>
        <webview id="content" src="http://www.yahoo.com" preload="./inject.js" autosize="on"></webview>
        
        <script>
           var ipc = require('ipc');
           var webview = document.getElementById('content');
           webview.addEventListener("ipc-message", function(e){
             if (e.channel === 'mouseover-href') {
                console.log('href: ' + e.args[0]);
             }
           });
        </script>
    </body>
</html>

inject.js

var ipc = require('ipc');
document.addEventListener('mouseover', function(event) {
  var hoveredEl = event.target;
  if (hoveredEl.tagName !== 'A') { return; }
  ipc.sendToHost('mouseover-href', hoveredEl.href);
});

#4

After reading thru documentation, I could figure this out myself. I was interested in knowing more about how to inject javascript into the webview’s guest page and the ipc communication between guest page and the webview’s embedder page.

Anyhow, Thanks @olmokramer for actively responding to my queries.

Though i was able to get ‘mouseover’ event, i’m having a different issue with ‘mouseleave’ event as it never gets triggered, with the following code in inject.js -

document.addEventListener('mouseleave', function(event) {
   var hoveredEl = event.target;
   if (hoveredEl.tagName !== 'A') {
      return;
   }
   console.log('mouseleave: ' + hoveredEl.href);
   ipc.sendToHost('mouseleave-href', hoveredEl.href);
});

#5

Replaced ‘mouseleave’ with ‘mouseout’. Works fine now.


#6

I am trying to do something similar to this, as well as grab some HTML inside the <webview>. I copied all this code and didn’t see anything that would infer it’s working (by way of console.logs). Here is how I’m rendering my <webview>:

iframeInit +=
    "<webview class='tabs-pane active' id='' src='file://" + __dirname + "/pages/start.html' preload='file://" + __dirname + "/resources/scripts/browser.js' autosize='on'></webview>"; 

browser.js contains the code that is in inject.js. I put the <script> contents of renderer process in my main script file.

Did I supply enough information for anyone to help me?


EDIT: Haha, nevermind. I discovered answers to another question in this forum which made the code here make sense. I’m good now, thanks for sharing.