应用场景是：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. LPEG

    local lpeg = require "lpeg"    function f0() end;    function f1() return "a" en ...

  2. magento-connect-manage出现404或者500内部错误的解决办法

    将网站根目录下的downloader文件权限改为755,将downloader下的index.php文件的权限改为644即可:

  3. 【题解】【BT】【Leetcode】Populating Next Right Pointers in Each Node

    Given a binary tree struct TreeLinkNode { TreeLinkNode *left; TreeLinkNode *right; TreeLinkNode *nex ...

  4. win live

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

  5. python 的 class

    虽然python OOP 是可选的,但是尽可能使用OOP, 可以让你的代码更精简,容易理解. python 中大多数OOP故事, 都可简化为这个表达式: object.attribute 类的建立使用 ...

  6. 如何用 freebayes call SNP

    1,软件介绍 FreeBayes is a Bayesian genetic variant detector designed to find small polymorphisms, specif ...

  7. Linux下常用压缩格式的压缩与解压方法

    .tar 解包: tar xvf FileName.tar 打包:tar cvf FileName.tar DirName (注:tar是打包,不是压缩!) --------------------- ...

  8. 博客引索 - imsoft.cnblogs

    Java C Delphi 日常工具 图片处理 视频处理 系统工具 知识经验 奇思妙想 网站推荐

  9. 114. Flatten Binary Tree to Linked List

    Given a binary tree, flatten it to a linked list in-place. For example,Given 1 / \ 2 5 / \ \ 3 4 6 T ...

  10. 1-1 Java简介

    主要内容: <1>Java平台应用 <2>核心概念:JVM.JDK.JRE <3>搭建Java开发环境 <4>使用工具开发Java程序 <5> ...