当前位置:  编程技术>WEB前端

用jquery修复在iframe下的页面锚点失效问题

    来源: 互联网  发布时间:2014-08-25

    本文导语:  应用场景是:iframe页面没有滚动条,在父窗体中出现滚动条,锚点标记就会失效,因为,锚点是根据当前窗口滚动条滚动窗口的,成为子窗体后没有了滚动条,自然不会滚动。 解决办法是:用js判断页面是否被嵌套,用js计算if...

应用场景是:iframe页面没有滚动条,在父窗体中出现滚动条,锚点标记就会失效,因为,锚点是根据当前窗口滚动条滚动窗口的,成为子窗体后没有了滚动条,自然不会滚动。

解决办法是:用js判断页面是否被嵌套,用js计算iframe在父窗体位置,锚点在firame中的位置,两者相加成为父窗体的滚动。

遇到问题:获取父窗体元素(因为有域限制,所有需要在网络环境下方位(即http://domain.com));父窗体嵌套多个iframe,判断是否是当前iframe页面。

代码:

父窗体页面 index.html






*{
margin: 0;
padding: 0;
border: 0;
}
html,
body{
width: 100%;
height: 100%;
}



dd ddd

子窗体页面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

    
 
 
 
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • 通过javascript库JQuery实现页面跳转功能代码
  • jquery刷新页面 jquery局部刷新与及全页面刷新
  • jquery 父页面查找iframe子页面内容、子页面查找父页面内容
  • 解决用jquery load加载页面到div时,不执行页面js的问题
  • jQuery animate方法定位页面具体位置(示例)
  • jQuery页面加载完毕再执行代码多种方法
  • jQuery 页面加载 fakeLoader.js
  • jQuery 页面动画效果 Animsition
  • jQuery向导页面插件 jWizard
  • jquery 页面滚动到指定DIV的代码
  • jQuery 页面滚动插件 ScrollMe
  • jQuery页面元素缩放插件 Zoonooz.js
  • Jquery跳到页面指定位置的方法
  • jQuery页面滚动插件 toanywhere
  • jQuery 页面滚动插件 Scrolld.js
  • jQuery aminate方法定位到页面具体位置
  • 自适应页面背景插件 jQuery.resBg
  • jquery防止重复执行动画避免页面混乱
  • jQuery 页面切换插件 browserSwipe.js
  • jQuery 页面滚动插件 One Page Scroll
  • Jquery更换主题同时刷新iframe页面的代码举例
  • jQuery概述,代码举例及最新版下载
  • jQuery鼠标动画插件 jquery-ahover
  • Jquery操作html复选框checkbox:全选,全不选和反选
  • jQuery向导插件 Jquery Wizard Plugin
  • struts+spring+hibernate+jquery实现分页功能的几个基本类介绍(异步加载)
  • jQuery圆角插件 jQuery Corners
  • jQuery相册插件 jQuery.popeye
  • jQuery UI组件 jQuery UI
  • jQuery右键菜单插件 jQuery ContextMenu
  • jQuery分页插件 Pagination jQuery Plugin




  • 特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3