当前位置: 编程技术>WEB前端
用jquery修复在iframe下的页面锚点失效问题
来源: 互联网 发布时间:2014-08-25
本文导语: 应用场景是:iframe页面没有滚动条,在父窗体中出现滚动条,锚点标记就会失效,因为,锚点是根据当前窗口滚动条滚动窗口的,成为子窗体后没有了滚动条,自然不会滚动。 解决办法是:用js判断页面是否被嵌套,用js计算if...
应用场景是:iframe页面没有滚动条,在父窗体中出现滚动条,锚点标记就会失效,因为,锚点是根据当前窗口滚动条滚动窗口的,成为子窗体后没有了滚动条,自然不会滚动。
解决办法是:用js判断页面是否被嵌套,用js计算iframe在父窗体位置,锚点在firame中的位置,两者相加成为父窗体的滚动。
遇到问题:获取父窗体元素(因为有域限制,所有需要在网络环境下方位(即http://domain.com));父窗体嵌套多个iframe,判断是否是当前iframe页面。
代码:
父窗体页面 index.html
子窗体页面iframe.html
a{ padding: 5px; border: 1px solid #f00; float: left; display: block; margin-right: 5px; } div{ width: 80%; margin: 10px auto; height: 500px; border: 1px solid #f00; font-size: 30px; } $(function(){ //如果是iframe则需要在网络中访问,因为js里有域限制 //如果没有iframe则不进行处理, if(window!==window.top){ //获取top窗口中的iframe,如果有iframe嵌套过多,请自行修改 var iframeList=window.top.document.getElementsByTagName('iframe'); for(var i=0;i