用jquery修复在iframe下的页面锚点失效问题


Posted in Javascript onAugust 22, 2014

应用场景是: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" rel="external nofollow" >a</a>
<a href="#b" rel="external nofollow" >b</a>
<a href="#c" rel="external nofollow" >c</a>
<a href="#d" rel="external nofollow" >d</a>
<div><a href="" name=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" a">A</a></div>
<div><a href="" name=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" b">B</a></div>
<div><a href="" name=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" c">C</a></div>
<div><a href="" name=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" d">D</a></div>

</body>
</html>
Javascript 相关文章推荐
jquery post方式传递多个参数值后台以数组的方式进行接收
Jan 11 Javascript
用jquery存取照片的具体实现方法
Jun 30 Javascript
javascript学习笔记(二)数组和对象部分
Sep 30 Javascript
在JavaScript中处理字符串之link()方法的使用
Jun 08 Javascript
JS图片等比例缩放方法完整示例
Aug 03 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
Aug 16 Javascript
js实现鼠标跟随运动效果
Aug 02 Javascript
JS同步、异步、延迟加载的方法
May 05 Javascript
浅析Vue实例以及生命周期
Aug 14 Javascript
深入解读Node.js中的koa源码
Jun 17 Javascript
vue 中 命名视图的用法实例详解
Aug 14 Javascript
webpack 处理CSS资源的实现
Sep 27 Javascript
JavaScript实现的石头剪刀布游戏源码分享
Aug 22 #Javascript
一个很有趣3D球状标签云兼容IE8
Aug 22 #Javascript
wap图片滚动特效无css3元素纯js脚本编写
Aug 22 #Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
Aug 22 #Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
Aug 22 #Javascript
js使用正则实现ReplaceAll全部替换的方法
Aug 22 #Javascript
IE浏览器IFrame对象内存不释放问题解决方法
Aug 22 #Javascript
You might like
在PHP中实现Javascript的escape()函数代码
2010/08/08 PHP
php笔记之:有规律大文件的读取与写入的分析
2013/04/26 PHP
浅析php创建者模式
2014/11/25 PHP
jQuery 第二课 操作包装集元素代码
2010/03/14 Javascript
javascript面向对象包装类Class封装类库剖析
2013/01/24 Javascript
jQuery jcrop插件截图使用方法
2013/11/20 Javascript
js实现简单随机抽奖的方法
2015/01/27 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
2016/02/15 Javascript
jQuery Easyui Tabs扩展根据自定义属性打开页签
2016/08/15 Javascript
JQuery中解决重复动画的方法
2016/10/17 Javascript
jquery获取input type=text中的值的各种方式(总结)
2016/12/02 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
2018/03/21 Javascript
基于jQuery实现的设置文本区域的光标位置
2018/06/15 jQuery
Vue组件之单向数据流的解决方法
2018/11/10 Javascript
详解基于Vue的支持数据双向绑定的select组件
2019/09/02 Javascript
Vue3.x源码调试的实现方法
2019/10/13 Javascript
[46:02]DOTA2上海特级锦标赛D组资格赛#2 Liquid VS VP第二局
2016/02/28 DOTA
[01:34]完美“圣”典宣传片震撼发布,12.17与你不见不散
2016/12/16 DOTA
python翻译软件实现代码(使用google api完成)
2013/11/26 Python
详解设计模式中的工厂方法模式在Python程序中的运用
2016/03/02 Python
Python的string模块中的Template类字符串模板用法
2016/06/27 Python
如何用Python合并lmdb文件
2018/07/02 Python
Python实现一个带权无回置随机抽选函数的方法
2019/07/24 Python
python2.7的flask框架之引用js&amp;css等静态文件的实现方法
2019/08/22 Python
Django 解决阿里云部署同步数据库报错的问题
2020/05/14 Python
Bootstrap File Input文件上传组件
2020/12/01 HTML / CSS
优衣库英国官网:UNIQLO英国
2016/12/25 全球购物
美国在线面料商店:Online Fabric Store
2018/07/26 全球购物
一份全面的PHP面试问题考卷
2012/07/15 面试题
通用C#笔试题附答案
2016/11/26 面试题
应届生服务员求职信
2013/10/31 职场文书
万年牢教学反思
2014/02/15 职场文书
委托证明范本
2014/11/25 职场文书
卡特教练观后感
2015/06/08 职场文书
先进个人事迹材料(2016推荐版)
2016/03/01 职场文书
详解Mysql事务并发(脏读、不可重复读、幻读)
2022/04/29 MySQL