无法点击iframe / span下的链接

时间:2013-10-21 20:45:14

标签: css iframe html pointer-events

我开发了一个位于窗口底部的静态广告代码。这是<iframe>,以便其他人更轻松地将其置于其网站上。 <span>周围的另一个<iframe>会将其固定在屏幕底部。该脚本有一个标记内的帮助窗口 - 位于<iframe>内,并使用visible / hidden属性显示或隐藏文本。

现在,由于代码位于<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>

2 个答案:

答案 0 :(得分:1)

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

让我知道这是怎么回事

答案 1 :(得分:0)

哦,小伙子,有什么好玩的让我上班!! (23日星期三十二小时,今天大约三小时)

最初,我有一个<iframe>,几乎占据了屏幕的3/4(这样我就可以显示帮助窗口,而不是使用模态弹出窗口。但是,出于安全考虑,浏览器不允许您点击覆盖下方链接的文本。

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

现在,我将帮助文件放在一个单独的<span>窗口中,该窗口的可见性设置为隐藏,直到用户需要它为止。但这仍然使得股票代码位于底部。

我不得不把它分成主要自动收报机两侧的三个<divs>。但同样,旁边的那些有效地屏蔽了下面的页面,所以我必须设置<divs>以便他们使用“pointer-events:none”意味着<div>不可点击,鼠标事件将传递到下面的代码。自动收报机的中间部分设置为相反的,namily“pointer-events:auto”,这样TOP窗口就会获得点击,而不是下面的页面。

下一个问题:由于自动收报机显示的图形延伸到主文本中,因此无法访问主页上点击的1/2“区域。另一个范围被添加到覆盖该区域的代码中当用户将鼠标放在此图形上时,会发生交换并显示一个半透明的棋盘格。然后,他们可以在帮助文件中读取这意味着什么。

最后,当用户点击最小化按钮时,隐藏了代码代码的<div>(允许访问页面上的所有链接),另一个<div>显示“恢复”图形。当他们点击它时,它会在主要的自动收报机窗口中被隐藏 - 并且两侧的两个<divs>再次可见。

它只是一个简单的脚本! (哦,不要查看网站或我的博客'因为我将不会上传更改,直到26日星期六前夕)