iframe /span 下的链接无法点击

Posted 2023-02-24

【中文标题】iframe /span 下的链接无法点击

【英文标题】：links under iframe /span cannot be clicked

【发布时间】：2013-10-21 20:45:13

【问题描述】：

我开发了一个位于窗口底部的静态广告代码。这是在<iframe> 中，以便其他人更容易将设备放置在他们的网站上。 <iframe> 周围的另一个 <span> 将其固定在屏幕底部。该脚本有一个位于标签内的帮助窗口 - 在<iframe> 内，并使用可见/隐藏属性来显示或隐藏文本。

现在由于代码位于<iframe> 中，因此帮助文本不会出现在主窗口中。为了解决这个问题，我将<iframe> 放大，并将其设置为透明。

在视觉上，一切都很好。当用户单击股票代码上的按钮时，帮助菜单会出现在后台数据的上方。但是，我刚刚发现，如果主页上有一个链接在<span><iframe> 部分下经过，则无法单击它。我已经尝试过 CSS 指针事件，但无法让它工作，（<iframe> 中的链接也必须保持可点击状态）

不确定是哪个导致了“故障”，即<iframe> 或它周围的标签。停止“点击劫持”(??) 或更重要的是是否安全，是否有解决方法。

如果迫在眉睫，我可以减小 <iframe> 的大小并使用 javascript 弹出窗口来显示帮助文本，但是这些窗口显示 URL 和状态窗口，而且不是很优雅！

这是在有人问之前的代码： 这个跨度覆盖整个屏幕到底层<iframe> 的高度我这样做是为了让数据居中

 <span style="position:fixed;bottom:10px;display:inline;width:100%">
 <center>
 <iframe src="http://www.xxx.com/cgi-bin/ticker/run_tick.pl?s=xzy" frameborder=0 align=top width=800px height=330px marginwidth=0 marginheight=0 hspace=0 vspace=0  scrolling=no allowtransparency=true></iframe>
 </center>
 </span>

【问题讨论】：

嗨，我没有回滚，因为更改并不大：我回滚是因为勾号 (`) 是触发代码元素的正确方法。干杯！

对不起，我还是新手，所以不知道格式化帖子的“来龙去脉”。另外，我不知道这是一个活生生的人在互动，我以为是一个机器人告诉我一个问题，提示并没有告诉我很多。所以谢谢你纠正我。

我点击回车并发布而不是添加换行符，（我必须记住的另一个怪癖！）今天早上，我发现问题不是<iframe> as I've managed to use

【参考方案1】：

将高度设置为与 iframe (330px) 相同的跨度

让我知道这是怎么回事

【讨论】：

感谢您的提示，但没有帮助。我现在删除了 <iframe> 代码，并用 <object> 嵌入替换它。 <span> 必须大于股票代码，因为它可以有一个延伸到主页的图片。 （要了解我的意思，请查看此内容）

由于“ad6”的原因，我现在设法让<span> 位于股票代码上方约 50 像素处，但主页上仍有任何位于“”后面的基础链接 -上方或侧面 - 不可点击。我也希望我可以在股票代码上方设置另一个<span><object.，并将其隐藏，以显示帮助文本......（目前在`

编辑评论 1 超时。链接是：cristofayre.com/ticker（不要点击 JVZoo 链接，因为我仍处于测试模式，因为 PayPal 问题不允许我购买自己的产品尽管有两个不同的帐户！）

【参考方案2】：

哦，男孩，我让这个工作变得多么有趣！ （23 日星期三 12 小时，今天大约 3 小时）

最初，我有一个<iframe>，它几乎占满了屏幕的 3/4（这样我就可以显示帮助窗口以在“”中使用，而不是使用模式弹出窗口。但是，出于安全原因，浏览器不会让您点击覆盖下方链接的文本。

我不得不重新设计整个布局。

现在，我在单独的<span> 窗口中有帮助文件，它的可见性设置为隐藏，直到用户需要它。但这仍然在底部留下了股票代码。

我不得不将它分成三个<divs>，一个位于主代码的两侧。但同样，侧面的那些有效地掩盖了下面的页面，所以我必须同时设置<divs>，以便他们使用“pointer-events：none”，这意味着<div>不可点击，并且鼠标事件会通过到下面的代码。代码的中间部分设置为相反的，命名为“pointer-events:auto”，以便 TOP 窗口获得点击，而不是下方的页面。

下一个问题：因为代码显示的图形延伸到主文本中，所以留下了一个 1/2" 区域，无法访问主页面上的点击。另一个跨度被添加到代码中，该区域用透明 gif。当用户将鼠标放在此图形上时，会发生交换并显示一个半透明的棋盘。然后他们可以在帮助文件中阅读这意味着什么。

最后，当用户点击最小化按钮时，持有股票代码的<div> 被隐藏（允许访问页面上的所有链接），另一个<div> 显示“恢复”图形。当他们点击它时，它会被隐藏，而主代码窗口 - 以及两侧的两个 <divs> 再次可见。

而且它只是一个简单的脚本！ （哦，不要查看网站或我的博客，因为我不会在 26 号星期六前夕上传更改）