检测 iFrame 上的活动，然后运行函数

Question

这个话题已经讨论过几次，但没有使用 Javascript 的明确解决方案。所有的反应都很模糊。请帮助我，因为我在任何网站上都找不到直接的答案。

当 iframe 窗口内发生任何点击时，我正在尝试执行一个函数。具体来说，点击 iframe 中显示的页面上的超链接。但是，只要能够在 iframe 中触发任何点击功能就足够了。

我有一个函数 Show()，我想在单击 iframe 时运行它。所以基本上一个链接会自动隐藏，当第一个链接被点击时它会显示出来。当点击显示的“点击隐藏”链接时，“点击隐藏”链接被隐藏。我希望当有人在 iframe 中点击时显示“点击隐藏”链接。每次在 iframe 中发生点击时，我都需要它来运行该功能。谢谢。

一个用户想出了一个使用 div 的解决方案，这在技术上是一个解决方案，但它有一些问题，我将在下面解释：

未调整的代码：

<html>
  <head>


  <title>StackOverflow Example</title>


  <style>
  .visible {visibility: visible}
  .hidden {visibility: hidden}
  </style>
  <script type="text/javascript">
  var visible_link = true;
  function Hide() {
      document.getElementById("my_div").className = "hidden";
      document.getElementById("my_button").value = "SHOW";
  }
  function Show() {

   
      document.getElementById("my_div").className = "visible";
      document.getElementById("my_button").value = "HIDE";
    
    
  }
 
  </script>


  </head>



  <body>

<center>


<iframe src="http://www.google.com" height=549 width=100% frameborder=0 name = "hello"></iframe>

<a href="http://www.google.com" target = "hello" onclick = "Show();">click to show below link</a>

    <div id="my_div" class="hidden">
      <a href="http://www.google.com" target="hello" onclick = "Hide();" >click me to hide</a>
    </div>


    
</center>  

</body>

</html>

添加 div 允许在单击 iframe 区域时显示链接（正如您所看到的 div 所在的位置 - 不幸的是，我认为我只是单击 div 并且它下面的 iframe 页面上没有任何内容是可点击的)。

但是，我遇到了三个问题。

1) div如何占据整个窗口的宽度（我尝试在#cover下的宽度值上加100%）。

2) 当 div 覆盖所有 iframe 时，iframe 内的网页不可点击。

3) div 不透明。

调整代码：

<html>
  <head>


  <title>StackOverflow Example</title>


  <style>
  .visible {visibility: visible}
  .hidden {visibility: hidden}
#cover {
  position: absolute;
  background: rgba(0, 0, 0, 0.5); /* added for example */
  height: 150px;
  width: 150px;
}
  </style>
  <script type="text/javascript">
  var visible_link = true;
  function Hide() {
      document.getElementById("my_div").className = "hidden";
      document.getElementById("my_button").value = "SHOW";
  }
  function Show() {

   
      document.getElementById("my_div").className = "visible";
      document.getElementById("my_button").value = "HIDE";
    
    
  }
 
  </script>


  </head>



  <body>

<center>

<div id="cover" onclick="Show();"></div>
<iframe src="http://stackoverflow.com" height=549 width=100% frameborder=0 name = "hello"></iframe>

<a href="http://stackoverflow.com" target = "hello" onclick = "Show();">links</a>

    <div id="my_div" class="hidden">
      <a href="http://stackoverflow.com" target="hello" onclick = "Hide();" ><-</a>
    </div>


    
</center>  

</body>

</html>

如果有人可以编辑上面的代码并让 div 占据所有宽度，同时 iframe 的网页完全可点击是透明的 - 我会非常感激和高兴。

Answer 1

我找到了解决方案。它并不完美，但我发现我真的不需要它来检测每个 iframe 点击，这已经足够了。如果单击 iframe 内的页面内的链接，我最初想显示一个后退按钮（这会将用户返回到他们开始的 iframe 内的主页）。显然，他们可能会随机点击而不点击超链接，并且返回链接会无缘无故弹出（当他们仍在主页上时）。我想这很好，但如果有人知道更好的解决方案，请告诉我。大多数人都会点击一个链接开始，因为我认为该页面只有超链接交互。

我希望我下面的工作代码对将来探索这个主题的人有所帮助。

代码：

<html>
<head>


<title>StackOverflow Example</title>


<style>
.visible {visibility: visible}
.hidden {visibility: hidden}

}
</style>
<script type="text/javascript">
var visible_link = true;

var inIframe = false;
function Hide() {
document.getElementById("my_div").className = "hidden";
document.getElementById("my_button").value = "SHOW";
}
function Show() {


document.getElementById("my_div").className = "visible";
document.getElementById("my_button").value = "HIDE";


}


function checkClick() {
if (document.activeElement 
&& document.activeElement === document.getElementById("hello")) {
if (inIframe == false) {
Show();
inIframe = true;
}
} else
inIframe = false;
}
setInterval(checkClick, 200);

</script>


</head>



<body>

<center>

<div id="cover" onclick="Show();"></div>
<iframe src="http://w3schools.com" height=549 width=100% frameborder=0 name = "hello" id = "hello" style =""></iframe>

<a href="http://w3schools.com" target = "hello" onclick = "Show();">click to show link</a>

<div id="my_div" class="hidden">
<a href="http://w3schools.com" target="hello" onclick = "Hide();" >click to hide</a>
</div>



</center> 

</body>

</html>