Question

本主题已经涵盖了几次，但没有使用Javascript的明确解决方案。所有回复都很模糊。请帮助我，因为我在任何网站都找不到任何直接的答案。

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

我有一个函数Show（），我想在点击iframe时运行它。所以基本上链接会自动隐藏，当点击第一个链接时会显示。当＆＃34;点击隐藏＆＃34;点击显示的链接，＆＃34;点击隐藏＆＃34;链接是隐藏的。我希望＆＃34;点击隐藏＆＃34;当有人在iframe中点击时显示的链接。我每次在iframe中发生点击时都需要它来运行该功能。感谢。

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

非调整代码：

＆＃13;

<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>

＆＃13;

添加div可以在点击iframe区域时显示链接（正如您所看到的那样，只是在div的位置 - 不幸的是我想我只是点击div而在iframe的页面上没有任何内容在它下面是可点击的。）

但是，我有三个问题。

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

2）当div覆盖所有iframe时，iframe中的网页无法点击。

3）div不透明。

调整代码：

＆＃13;

<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>

＆＃13;

如果有人可以编辑上面的代码并让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>

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

1 个答案: