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

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

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

代码：

父窗体页面 index.html

<!doctype html>

<html>

<head>

    <title></title>

    <style type="text/css">

    *{

        margin: 0;

        padding: 0;

        border: 0;

    }

    html,

    body{

        width: 100%;

        height: 100%;

    }

    </style>

</head>

<body>

<div style="width:100%;background:#f00;height:500px;"></div>

<a href="">dd</a>

<a href="">ddd</a>

<iframe name="iframe2" id="iframe2" src="iframe.html?a=b&c=d" style="width:100%;height:2060px;"></iframe>

<iframe name="iframe2" id="iframe2" src="iframe.html?a=d&c=b" style="width:100%;height:2060px;"></iframe>

</body>

</html>

子窗体页面iframe.html

<!doctype html>

<html>

<head>

    <title></title>

    <style type="text/css">

    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;

    }

    </style>

    <script type="text/javascript" src="jquery-1.8.2.min.js"></script>

    <script type="text/javascript">

    $(function(){

        //如果是iframe则需要在网络中访问，因为js里有域限制

        //如果没有iframe则不进行处理，

        if(window!==window.top){

            //获取top窗口中的iframe，如果有iframe嵌套过多，请自行修改

            var iframeList=window.top.document.getElementsByTagName('iframe');

            for(var i=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在父窗体的距顶部距离

                        var top = window.top.document.getElementsByTagName('iframe')[i].offsetTop;

                        $('a').each(function(){

                            var href = $(this).attr('href');

                            if(href.indexOf('#')!=-1){//判断是否是锚点而不是链接

                                var name = 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>

<a href="#a">a</a>

<a href="#b">b</a>

<a href="#c">c</a>

<a href="#d">d</a>

<div><a href="" name="a">A</a></div>

<div><a href="" name="b">B</a></div>

<div><a href="" name="c">C</a></div>

<div><a href="" name="d">D</a></div>

</body>

</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. Inno Setup 在安装程序开始前和卸载程序开始前，检查并关闭运行的进程

    (2011-12-29 11:54:56) 转载▼ 标签: innosetup it 分类: 开发工具经验累积 Inno Setup在安装程序前,如果有使用的进程在运行,会有错误提示,而使得Insta ...

  2. Inno Setup 安装、卸载前检测进程或服务

    [转载]Inno Setup 安装.卸载前检测进程或服务 (2015-04-24 17:37:20) 转载▼ 标签: 转载   原文地址:Inno Setup 安装.卸载前检测进程或服务作者:一去丶二 ...

  3. Math中floor,round和ceil的区别

    floor 返回不大于的最大整数 round 则是4舍5入的计算,入的时候是到大于它的整数(当-1.5时可见,四舍五入后得到的结果不是我们期待的,解决办法是先对他取绝对值,然后在用round方法) r ...

  4. LeetCode Permutations （全排列）

    题意: 给出n个元素,请产生出所有的全排列. 思路: 注意到可能会有相同的排列出现,比如 {2,2}.还有可能是乱序列(大部分情况下都是无所谓的). 递归(1):产生的过多的多余vector. cla ...

  5. 初探Openstack Neutron DVR

    目前在Juno版本的trunk中已经合入了DVR相关的代码,我的理解是在Juno版本中DVR是一个experimental feature.最好需要稳定一个版本以后再上生产环境.之前写过一篇博文是DV ...

  6. Context启动startActivity注意

    intent.setFlags()方法中参数的用例: 很多人使用startActivity时候,会碰到如下的异常:Caused by: android.util.AndroidRuntimeExcep ...

  7. Nginx 的线程池与性能剖析

    http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt158   正如我们所知,NGINX采用了异步.事件驱动的方法来处理连接.这种处理方 ...

  8. iOS8适配工作

    1 按钮,菜单文字被加上下划线的问题. 2 状态栏被遮挡的问题.(iPhone6明显,iPhone4S无) 3 使用xcode6最新版本进行编译出现的通知无法呈现的问题(也不进行提示) 4 权限检测( ...

  9. 单元测试--四则运算2程序（c++）

    源代码: //2016 3.6 Cheng Qiqin //四则运算改进 #include <iostream> #include<ctime> #include<cst ...

  10. C++ Primer : 第十章 : 泛型算法 之 只读、写和排序算法

    大多数算法都定义在<algorithm>头文件里,而标准库还在头文件<numeric>里定义了一组数值泛型算法,比如accumulate. ●  find算法,算法接受一对迭代 ...