在 iframe 内点击任何 link 调用 JS 函数

Question

场景：

一个 iframe 正在加载一个包含许多不同 hyperlink 的页面。

<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 内的 hyperlink 上附加 onclick="jsfunction()"。

但是有没有什么方法可以在 iframe 中的任何 link 单击上调用 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 将被浏览器阻止。

在 iframe 内点击任何 link 调用 JS 函数

Call a JS function on any link click inside an iframe

javascript

iframe

href