Question

我想点击iframe窗口中的任意位置打开新标签页。

<div id="iframeDiv">            
    <iframe id="frame" src="anysite.com" width="100%" height="400"></iframe>
</div>

点击iframeDiv，我想在新的浏览器标签中打开anysite.com

Answer 1

您可能尝试在元素上添加一个侦听器：

var iframeDiv = document.getElementById("iframeDiv");

iframeDiv.addEventListener("click", function(e) {
    window.location.href = document.getElementById("frame").src;
}, true);

在true调用中的函数之后传递的addEventListener告诉浏览器在捕获时运行此函数，这意味着在iframe内执行事件之前。如果您不这样做，点击iframe内的链接会在JavaScript事件运行之前跟随该链接。遗憾的是，捕获事件与IE＆lt; 9

不兼容

但它不适用于iframe！

我认为这可行，但似乎浏览器将iframe视为其他页面并且不会在父级上抛出事件。这意味着实际检测iframe点击次数的唯一方法是在iframe前放置一个不可见元素，这样您就不会实际点击框架，而是在元素上。

＆＃13;

var iframeDiv = document.getElementById("iframeDiv");

iframeDiv.addEventListener("click", function(e) {
  window.location.href = document.getElementById("frame").src;
});

＆＃13;

#iframeDiv {
  position: absolute;
  background-color: yellow;
}
#frameDummy {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
}

＆＃13;

<div id="iframeDiv">
  <iframe id="frame" src="/" width="200" height="200"></iframe>
  <div id="frameDummy"></div>
</div>

＆＃13;

Answer 2

你正在寻找的东西可能不是一个正确的想法，因为当我们为框架定义src属性时，它会使用src中给出的url加载框架。写入框架的任何功能都不会生效

请尝试使用此代码

创建一个名为frame.html的新页面

    <!DOCTYPE html>
<html>
<body>
<div id="iframeDiv">
<base target="_blank" />
<iframe width="400" height="215" frameborder="10px" scrolling="no" marginheight="0" marginwidth="0"
   src="frameinside.html">
</iframe>

</body>
</html>

和页面frameinside.html

    <html>
 <head>
<title>This frame goes inside</title>
</head>
<body onclick="window.open('http://google.com', '_blank')">
<h1 align="center">Welcome home</h1>
</body>
</html>

当您在“frame.html”中点击此框架时，您将被重定向到指向新窗口的链接。

单击iframe，在浏览器中打开新选项卡

2 个答案: