Question

我使用此代码在Electron之外的浏览器中打开外部链接。如果文本是在设定后写的，那么它可以正常工作：

＆＃13;

 let shell = require('electron').shell
document.addEventListener('click', function (event) {
  if (event.target.tagName === 'A' && event.target.href.startsWith('http')) {
    event.preventDefault()
    shell.openExternal(event.target.href)
  }
})

＆＃13;

但是，如果图像被设置为链接，它根本不起作用并在Electron浏览器中打开：

＆＃13;

<a href="https://www.stackoverflow.com">
<img src='image1.jpg'></img>
</a>

＆＃13;

如何在Electron的外部浏览器中打开图像链接？

Answer 1

这里的问题是您正在侦听文档的点击次数，然后只检查event.target。如您所知，如果点击发生在链接内的子元素（例如图像）上，则event.target指向该子元素，并且您不会检测到该链接被点击

这是jQuery派上用场的地方之一。像$(document).on('click', 'a', ...)这样的东西很容易处理。

但是你不必使用jQuery。由于Electron使用Chromium，因此click事件具有名为path的非标准属性。该属性是一组父母，一直到DOM，一直到正文，文档，最后是全局。您可以在此数组上运行.find()以检查是否有任何元素恰好是链接，然后将该链接返回到您要处理的事件处理程序。

以下是这样的：

＆＃13;

document.addEventListener('click', function(event) {
  const link = getLink(event);

  if (link) {
    event.preventDefault()
    alert('caught: ' + link.href);
  }
});

function getLink(event) {
  return event.path.find(($el) => {
    if ($el.tagName === 'A' && $el.href.startsWith('http')) {
      return true;
    }

    return false;
  });
}

＆＃13;

<p>
  Image link:
  <a href="https://www.stackoverflow.com">
    <img src='https://placehold.it/100x100' />
  </a>
</p>

<p>
  Text link:
  <a href="https://example.com">Test link</a>
</p>

＆＃13;

Electron中的外部图像链接无法在外部浏览器中打开

1 个答案: