用jquery修复在iframe下的页面锚点失效问题
jQuery 问题 修复 页面 失效 iframe 锚点
2023-06-13 09:15:44 时间
应用场景是:iframe页面没有滚动条,在父窗体中出现滚动条,锚点标记就会失效,因为,锚点是根据当前窗口滚动条滚动窗口的,成为子窗体后没有了滚动条,自然不会滚动。
解决办法是:用js判断页面是否被嵌套,用js计算iframe在父窗体位置,锚点在firame中的位置,两者相加成为父窗体的滚动。
遇到问题:获取父窗体元素(因为有域限制,所有需要在网络环境下方位(即http://domain.com));父窗体嵌套多个iframe,判断是否是当前iframe页面。
代码:
父窗体页面index.html
<!doctypehtml> <html> <head> <title></title> <styletype="text/css"> *{ margin:0; padding:0; border:0; } html, body{ width:100%; height:100%; } </style> </head> <body> <divstyle="width:100%;background:#f00;height:500px;"></div> <ahref="">dd</a> <ahref="">ddd</a> <iframename="iframe2"id="iframe2"src="iframe.html?a=b&c=d"style="width:100%;height:2060px;"></iframe> <iframename="iframe2"id="iframe2"src="iframe.html?a=d&c=b"style="width:100%;height:2060px;"></iframe> </body> </html>
子窗体页面iframe.html
<!doctypehtml> <html> <head> <title></title> <styletype="text/css"> a{ padding:5px; border:1pxsolid#f00; float:left; display:block; margin-right:5px; } div{ width:80%; margin:10pxauto; height:500px; border:1pxsolid#f00; font-size:30px; } </style> <scripttype="text/javascript"src="jquery-1.8.2.min.js"></script> <scripttype="text/javascript"> $(function(){ //如果是iframe则需要在网络中访问,因为js里有域限制 //如果没有iframe则不进行处理, if(window!==window.top){ //获取top窗口中的iframe,如果有iframe嵌套过多,请自行修改 variframeList=window.top.document.getElementsByTagName("iframe"); for(vari=0;i<iframeList.length;i++){ //判断当前窗口是否循环中的iframe if(window.location.toString().indexOf(iframeList[i].getAttribute("src").toString())!=-1){ //等自己的所在iframe加载完成给a锚点加事件 window.top.document.getElementsByTagName("iframe")[i].onload=function(){ //确定iframe在父窗体的距顶部距离 vartop=window.top.document.getElementsByTagName("iframe")[i].offsetTop; $("a").each(function(){ varhref=$(this).attr("href"); if(href.indexOf("#")!=-1){//判断是否是锚点而不是链接 varname=href.substring(href.indexOf("#")+1); $(this).bind("click",function(){ $("a").each(function(){ if($(this).attr("name")==name){ //父窗口滚动 $(window.parent).scrollTop($(this).offset().top+top); } }); }); } }); } } } } }); </script> </head> <body> <ahref="#a"rel="externalnofollow">a</a> <ahref="#b"rel="externalnofollow">b</a> <ahref="#c"rel="externalnofollow">c</a> <ahref="#d"rel="externalnofollow">d</a> <div><ahref=""name="rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"a">A</a></div> <div><ahref=""name="rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"b">B</a></div> <div><ahref=""name="rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"c">C</a></div> <div><ahref=""name="rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"d">D</a></div> </body> </html>
相关文章
- jquery validation engine ajax验证,jQuery Validation Engine 表单验证「建议收藏」
- jQuery表单插件jquery.form.js详解编程语言
- 利用JSONP解决AJAX跨域问题的原理与jQuery解决方案详解编程语言
- jQuery $.each用法详解编程语言
- JQuery从头学起第三讲
- JQuery的Validation插件中Remote验证的中文问题
- Jquery从头学起第四讲jquery入门教程
- jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
- jQuery表格行换色的三种实现方法
- 推荐40个非常优秀的jQuery插件和教程【系列三】
- jQuery常见开发技巧详细整理
- jQuery调用WebService返回JSON数据及参数设置注意问题
- jQuery.validate常用方法及需要注意的问题
- setInterval,setTimeout与jquery混用的问题
- jquery中animate动画积累的解决方法
- jquery在项目中做复选框时遇到的一些问题笔记
- jquery根据name属性查找的小例子
- jquery获取URL中参数解决中文乱码问题的两种方法
- 快速解决jquery之get缓存问题的最简单方法介绍
- 解析jquery中的ajax缓存问题
- 使用jQuery快速解决input中placeholder值在ie中无法支持的问题
- 浅析jquery某一元素重复绑定的问题
- 解决Jquery鼠标经过不停滑动的问题
- jQuery插件开发详细教程
- jquery操作checked属性以及disabled属性的多种方法
- IE8下Jquery获取select选中的值post到后台报错问题
- jquery增加和删除元素的方法
- jquery果冻抖动效果实现方法
- jquery使用$(element).is()来判断获取的tagName