javascript - 在 iframe 内单击的任何链接上调用 JS 函数

Question

场景:

iframe 正在加载带有许多不同超链接的页面。

<iframe id=output>
    <a href="somedomain1.com"> click here </a>
    <a href="somedomain2.com"> click here </a>
    <a href="somedomain3.com"> click here </a>
</iframe>

我知道我无法在 iframe 内的超链接上附加 onclick="jsfunction()"。

但是有没有办法在 iframe 内的任何链接点击上调用 JS 函数？

编辑: Fiddle Link

Answer 1

你可以这样做:

const iframe = document.getElementById('output');
const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

iframeDoc.addEventListener('click', (e) => {
    console.log('click inside iframe')
    if (e.metaKey || e.ctrlKey || e.shiftKey) return;
    if (e.defaultPrevented) return;
    // ensure link
    // use shadow dom when available
    var el = e.path ? e.path[0] : e.target;

    while (el && 'A' !== el.nodeName) el = el.parentNode;
    if (!el || 'A' !== el.nodeName) return;

    console.log('click a tag inside iframe')
});

https://jsfiddle.net/17o093ov/2/

请注意，这仅在 iframe 与父页面具有相同来源的情况下才有效。否则，出于安全考虑，访问 contentDocument 将被浏览器阻止。