应用场景是：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. 第二个Sprint冲刺第一天

    讨论地点:宿舍 讨论成员:邵家文.李新.朱浩龙.陈俊金 任务:第二次sprint前期把选择题的计时功能完成. 燃尽图: 开发感悟: 大三第一学期就快结束了,大家都为未来找工作而烦恼.班里的高手都去学校 ...

  2. Note Pad++ 关闭语法错误时在代码下面的红线标识

    菜单栏 —- 插件 —- DSpellCheck . 将勾去掉即可

  3. vs2012 + cocos2d-x 2.1.5 + win7开发环境搭建步骤

    先要让vs具备cocos2d-x项目的模板,以此可以创建新的项目(1-5步),然后把相关的源码库文件和动态连接库都拷贝到自己的项目中,以使项目可以正常运行(6-7步). 1,打开vs,设置TestCp ...

  4. android webview如何加载asset目录里的页面

    在asset里的页面都可以这样获得 file:///android_asset/index.html

  5. 理解HMM

    hidden markov model markov model: 把一个总随机过程看成一系列状态的不断转移, 其特性主要使用转移概率来表示. HMM:认为模型的状态是不可观测的(hidden), 能 ...

  6. (基础篇)PHP流程控制语句

    不论是PHP还是别的语法,程序总是由若干条语句组成. 从执行方式上看,语句的控制结构分为以下三种: 1.  顺序结构:从第一条语句到最后一条语句完全顺序执行: 2.  选择结构:根据用户输入或语句的中 ...

  7. hdu 2335 Containers

    水题,就不解释了,不过这个题有一点很好,就是枚举的时候,枚举宽,也就是列数,因为这样才能越来越接近正方形 #include<cstdio> #include<cstring> ...

  8. Spring-IOC之前世今生

    没使用IOC之前 贯用工厂模式调用 bean组件 可类比为: 去商场买东西,你是先想好自己要买什么了,然后去寻找商品(逛商场的同学不要扯皮啊2333) 用了IOC之后 可类比为: 所有网上购物,所有的 ...

  9. px em rem在WEB前端开发中的区别

    我们都知道基于像素的字体大小所用的单位是px,但是随着响应式设计的不断火热,基于相对字体大小的单位em变开始流行起来.当然,rem也在Web前端开发人员讨论如何更好设置字体大小的讨论话题之列.是不是需 ...

  10. PHP间隔一段时间执行

    for ($i=0; $i < 20; $i++) { $m=M('vote'); $rs=$m->order('id')->select(); $randnum=array(0,1 ...