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

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

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

代码：

父窗体页面 index.html

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <title></title>
  5.     <style type="text/css">
  6.     *{
  7.         margin: 0;
  8.         padding: 0;
  9.         border: 0;
  10.     }
  11.     html,
  12.     body{
  13.         width: 100%;
  14.         height: 100%;
  15.     }
  16.     </style>
  17. </head>
  18. <body>
  19. <div style="width:100%;background:#f00;height:500px;"></div>
  20. <a href="">dd</a>
  21. <a href="">ddd</a>
  22. <iframe name="iframe2" id="iframe2" src="iframe.html?a=b&c=d" style="width:100%;height:2060px;"></iframe>
  23. <iframe name="iframe2" id="iframe2" src="iframe.html?a=d&c=b" style="width:100%;height:2060px;"></iframe>
  24. </body>
  25. </html>

子窗体页面iframe.html

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <title></title>
  5.     <style type="text/css">
  6.     a{
  7.         padding: 5px;
  8.         border: 1px solid #f00;
  9.         float: left;
  10.         display: block;
  11.         margin-right: 5px;
  12.     }
  13.     div{
  14.         width: 80%;
  15.         margin: 10px auto;
  16.         height: 500px;
  17.         border: 1px solid #f00;
  18.         font-size: 30px;
  19.     }
  20.     </style>
  21.     <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
  22.     <script type="text/javascript">
  23.     $(function(){
  24.         //如果是iframe则需要在网络中访问，因为js里有域限制
  25.         //如果没有iframe则不进行处理，
  26.         if(window!==window.top){
  27.             //获取top窗口中的iframe，如果有iframe嵌套过多，请自行修改
  28.             var iframeList=window.top.document.getElementsByTagName('iframe');
  29.             for(var i=0;i<iframeList.length;i++){
  30.                 //判断当前窗口是否循环中的iframe
  31.                 if(window.location.toString().indexOf(iframeList[i].getAttribute('src').toString())!=-1){
  32.  
  33.                     //等自己的所在iframe加载完成给a锚点加事件
  34.                     window.top.document.getElementsByTagName('iframe')[i].onload=function(){
  35.                         //确定iframe在父窗体的距顶部距离
  36.                         var top = window.top.document.getElementsByTagName('iframe')[i].offsetTop;
  37.                         $('a').each(function(){
  38.                             var href = $(this).attr('href');
  39.                             if(href.indexOf('#')!=-1){//判断是否是锚点而不是链接
  40.                                 var name = href.substring(href.indexOf('#')+1);
  41.                                 $(this).bind('click',function(){
  42.                                     $('a').each(function(){
  43.                                         if($(this).attr('name')==name){
  44.                                             //父窗口滚动
  45.                                             $(window.parent).scrollTop($(this).offset().top+top);
  46.                                         }
  47.                                     });
  48.                                 });
  49.                             }
  50.                         });
  51.                     }
  52.                 }
  53.             }
  54.         }
  55.  
  56.     });
  57.  
  58.     </script>
  59. </head>
  60. <body>
  61. <a href="#a">a</a>
  62. <a href="#b">b</a>
  63. <a href="#c">c</a>
  64. <a href="#d">d</a>
  65. <div><a href="" name="a">A</a></div>
  66. <div><a href="" name="b">B</a></div>
  67. <div><a href="" name="c">C</a></div>
  68. <div><a href="" name="d">D</a></div>
  69.  
  70. </body>
  71. </html>

在iframe下的页面锚点失效问题，用jquery进行修复的更多相关文章

  1. iframe中请求页面而session失效时页面跳转问题

    iframe中请求页面而session失效时页面跳转问题 分类: Web2009-12-11 15:01 656人阅读 评论(0) 收藏 举报 sessioniframejsp 有时候做了就忘了,我记 ...

  2. window.print()打印页面指定内容（使用iframe保证原页面不失效）

    使用window.print()时会出现两个问题: (1)直接使用window.print() 打印的是整页内容-->无法实现打印指定区域 (2)打印时替换body中的内容,打印完成后再替换回来 ...

  3. thinkphp下通过页面链接传递的参数获取一次后失效

    在thinkphp下通过页面链接传递的参数获取一次后失效,ajax内部无法再次使用.想要使用必须再次用js获取其值,通过ajax传递给后台使用. 1.通过页面链接传递参数给下一页 2.可以再下一页后台 ...

  4. iframe中的页面在IE全屏模式下没有滚动条，正常模式有滚动条

    这个问题在其他浏览器都不会出现,唯独IE不行,搜遍了百度以及各大论坛网站,都找不到这个问题的解决方案,只好自己整了. 造成这个问题的原因很简单,就是刚开始的滚动条我用的是iframe的滚动条,ifra ...

  5. struts2拦截器实现session超时返回登录页面（iframe下跳转到其父页面）

    需求:session超时时,返回登录页面,由于页面嵌套在iframe下,因此要跳转到登录页面的父页面,但是首页,登录页面等不需要进行跳转 实现: java文件:SessionIterceptor.ja ...

  6. 移动端web页面列表类上拉加载，查看详情，iframe嵌套第三方页面遇到的问题以及解决办法

    1.移动端上拉加载 网上有很多成熟的插件,比如iscroll.在这里介绍一下用jquery和js写的上拉加载方法.使用原生的去写上拉加载更多需要三个高度去做对比,以新闻类列表举例,首先需要整个dom的 ...

  7. jquery 在页面上根据ID定位（jQuery锚点跳转及相关操作） 经典

    1.锚点跳转简介 Edit 锚点其实就是可以让页面定位到某个位置上的点.在高度较高的页面中经常见到.比如百度的百科页面,wiki中的page内容. 我知道实现锚点的跳转有两种形式,一种是a标签+nam ...

  8. 弹出iframe内嵌页面元素到父页面并全屏化

    (注册博客好久了,一直没舍得添砖加瓦,主要是每次想写点东西的时候,随便搜一搜发现都比我总结的都要好,甚感尴尬,但是总是要开始的,所以这就是我的第一篇博客,也绝不会是最后一篇,废话不多说,直接入正题) ...

  9. javascript获取iframe框架中页面document对象,获取子页面里面的内容,iframe获取父页面的元素,

    javascript获取iframe框架中,加载的页面document对象 因为浏览器安全限制,对跨域访问的页面,其document对象无法读取.设置属性 function getDocument(i ...

随机推荐

  1. Magento创建configurable产品的要点

    接着上一篇用API创建可配置的产品Configurable Product说事.Magento的产品类型可分为Simple Product.Group Product.Configurable Pro ...

  2. Linux关机命令

    1.halt  :关机 init 0 : 关机 shutdown  -h  now (立刻关机)  -h 指的是  halt 2.reboot  重启 init 0 重启 shutdown -r no ...

  3. OpenFlow Switch学习笔记(一)——基础概念

    OpenFlow Switch v1.4.0规范是在2013年10月14号发布,规范涵盖了OpenFlow Switch各个组件的功能定义.Controller与Switch之间的通信协议Open F ...

  4. What are the 10 algorithms one must know in order to solve most algorithm challenges/puzzles?

    QUESTION : What are the 10 algorithms one must know in order to solve most algorithm challenges/puzz ...

  5. win live

    ok, this is my first live blog; just for test. r U ok fmkf vdsvsvv svsvsvsv try{ }

  6. （基础篇）PHP字符串操作

    PHP是弱类型语言,所以其它类型的数据一般可以直接应用于字符串操作函数里,而自动转换成字符串类型,进行处理,如: echo substr("1234567", 1, 3);  和 ...

  7. 命令行创建畸形文件夹+畸形目录管理工具(DeformityPath)

    命令行创建畸形文件夹: 第一步:在运行中输入cmd,回车,打开命令行窗口 第二步:在命令行窗口中切换到想要建立文件夹的硬盘分区,如D盘(输入d:) 第三步:输入 MD 123..＼ 回车,注意文件夹名 ...

  8. c#实现高精度四舍五入

    /// <summary>        /// 實現數據的四捨五入        /// </summary>        /// <param name=" ...

  9. URAL 1208 Legendary Teams Contest（DFS）

    Legendary Teams Contest Time limit: 1.0 secondMemory limit: 64 MB Nothing makes as old as years. A l ...

  10. java多线程：并发包中ReentrantReadWriteLock读写锁的原理

    一:读写锁解决的场景问题--->数据的读取频率远远大于写的频率的场景,就可以使用读写锁.二:读写锁的结构--->用state一个变量.将其转化成二进制,前16位为高位,标记读线程获取锁的次 ...