Позвоните в JS-функцию по любой ссылке, нажмите внутри iframe

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> 

Я знаю, что я не могу добавить onclick="jsfunction()" на гиперссылке, помещенную в IFRAME.

Но есть ли способ вызвать JS-функцию при любой ссылке, щелкнув внутри iframe?

Edit: 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 будет заблокирован браузером для обеспечения безопасности.