应用场景是：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. html文字垂直居中

    比如一个div  需设置height的高度和line-height一样. <div style="height:30px;line-height:30px;"> OK. ...

  2. 传智springMVC笔记

    springmvc 第一天 springmvc的基础知识 课程安排: 第一天:springmvc的基础知识 什么是springmvc? springmvc框架原理(掌握) 前端控制器.处理器映射器.处 ...

  3. 二维数组的传输 (host <-> device)

    前言 本文的目的很明确:介绍如何将二维数组传递进显存,以及如何将二维数组从显存传递回主机端. 实现步骤 1. 在显存中为二维数组开辟空间 2. 获取该二维数组在显存中的 pitch 值 (cudaMa ...

  4. iOS学习笔记---oc语言第一天

    第一讲 初始类和对象 c语言的超集,允许在oc中使用c语言源代码.编译器兼容c语言程序 具备完善的面向对象特性 包含一个运行时系统 类库丰富 面向对象编程 oop 面向对象语言:c++  java   ...

  5. Sprint第二个冲刺（第五天）

    一.Sprint 计划会议: 容杰龙继续完善昨天的SQLite修改数据操作,待全部操作完善后交给炜杰进行布局规范和整合. 二.Sprint周期:   看板: 燃尽图:

  6. jquery获取第几个元素的方法总结

    使用jquery时经常会遇到,选择器选择一组元素后,需要在这组元素中找到第几个元素. jquery中使用eq()方法找到第几个元素或第N个元素,jquery中eq()的使用如下: eq() 选择器选取 ...

  7. jq中 offset()方法， scrollTop()方法以及scrollLeft()方法

    offset()方法是用来获取元素在当前视窗的相对偏移,其中返回的对象包含两个属性,即top和left,它只对可见元素有效. scrollTop()方法是用来获取元素的滚动条距离顶端的距离. scro ...

  8. System program problem detected 解决

    每次开机都出现:System program problem detected 管理员权限打开:/etc/default/apport   su root   vim /etc/default/app ...

  9. 网站后台的lnmp启动与重启

    网站建立时间很长了,经常挂掉,又没有其他技术人员带.只好自己摸索着修复. 到今天网站已经挂掉了一个礼拜.请求各路大神无果后决定自己修复. 首先出现的是502,网关错误. 1.上阿里云服务用户中心重新启 ...

  10. Android应用开发高效工具集1---ant构建简单Android项目

    本文转载于:http://blog.csdn.net/lincyang/article/details/40950153 在java编译那些事儿中提到了用ant去编译Java项目,今天扩展到用它来构建 ...