应用场景是：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. MySQL表名、列名区分大小写详解

    前言:出现的问题 在本地数据库上执行修改银行卡没有报错 但线上执行报错 发现是表找不到,发现表名不对应该是card_cardinfo,但本地上没有问题,能正常修改,然后在数据库里测试,发现本地库(wi ...

  2. 《JS高程》实现继承的6种方式（完整版）

    许多OO语言都支持 两种继承方式: (1)接口继承:只继承方法签名: (2)实现继承:继承实际的方法. ECMAScript 由于函数没有签名,无法实现接口继承,因此只支持实现继承,而且主要是依靠原型 ...

  3. python中如何判断某个变量是否存在

    方法一:try...except... 方法二: locals().has_key('var') var变量存在返回True, 不存在返回False 方法三:'var' in dir() 同样返回Tr ...

  4. poj 3264 线段树 求区间最大最小值

    Description For the daily milking, Farmer John's N cows (1 ≤ N ≤ 50,000) always line up in the same ...

  5. 优秀HTML5活动页面

    一个好的手机活动宣传 更能让人分享 传播是爆炸性的 下面是我平时看到一些好的微信活动宣传页面  分享给大家 其中用到的技术 常做微信活动 专题页面的人 可以看看大神们是怎么做的  这样到自己做的时候 ...

  6. 软件或jar包等名字里的GA意思

    首页 > 转贴的文章 > 软件的版本"GA"代表什么意思?如MyEclipse 5.0 GA   软件的版本"GA"代表什么意思?如MyEclips ...

  7. linux ssh免密码登录设置

    ssh-keygen -t rsa 全部回车 生成密钥默认放在了/root/.shh中 打开它 cd /root/.ssh cp id_rsa.pub authorized_keys 免密码登录 现在 ...

  8. codevs3872 邮递员送信（SPFA）

    邮递员送信 时间限制: 1 Sec  内存限制: 64 MB提交: 10  解决: 5[提交][状态][讨论版] 题目描述 有一个邮递员要送东西,邮局在节点1.他总共要送N-1样东西,其目的地分别是2 ...

  9. JS数组随机排序

    var arr=[1,2,3,4,5]; arr.sort(function(a,b){ var v=Math.random()>0.5?1:-1; console.log(a,b,v); re ...

  10. JS中的call()方法的理解

    fn.call(obj,arg1,arg2);这是call()方法的使用形式,apply()是差不多的.作用是用obj对象来替换fn中的this 举个栗子: function A(){ this.co ...