javascript - 当里面有 iframe 时使 div 可点击

Question

我想给div添加onclick功能，但是当div里面有facebook插件iframe时，onclick功能不起作用。

有代码:

<div onclick="alert('123)">
  <iframe 
    src="https://www.facebook.com/plugins/page.php?..." 
    width="470" 
    height="160" 
    style="border:none;overflow:hidden" 
    scrolling="no" 
    frameborder="0" 
    allowTransparency="true">
  </iframe>
</div>

Answer 1

你可以尝试这样的事情:

逻辑:

• 在父窗口中，搜索所有iframe
• 导航到他们的父节点。
• 将事件附加到此节点。

window.addEventListener('load', registerEvent)

function registerEvent(){
  var divs = document.querySelectorAll("iframe");
  for(var i = 0; i< divs.length; i++){
    divs[i].parentNode.addEventListener("click", clickHandler)
  }
}

function clickHandler(){
  console.log(this.innerHTML);
}

div{
  background: #ddd;
  min-height: 100px;
}

iframe{
  background: #fff;
}

<div>
  <iframe 
    src="https://www.facebook.com/plugins/page.php?..." 
    width="470" 
    height="160" 
    style="border:none;overflow:hidden" 
    scrolling="no" 
    frameborder="0" 
    allowTransparency="true">
  </iframe>
</div>