在iframe下的页面锚点失效问题，用jquery进行修复
应用场景是：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进行修复的更多相关文章
- iframe中请求页面而session失效时页面跳转问题
iframe中请求页面而session失效时页面跳转问题 分类: Web2009-12-11 15:01 656人阅读 评论(0) 收藏 举报 sessioniframejsp 有时候做了就忘了,我记 ...
- window.print()打印页面指定内容（使用iframe保证原页面不失效）
使用window.print()时会出现两个问题: (1)直接使用window.print() 打印的是整页内容-->无法实现打印指定区域 (2)打印时替换body中的内容,打印完成后再替换回来 ...
- thinkphp下通过页面链接传递的参数获取一次后失效
在thinkphp下通过页面链接传递的参数获取一次后失效,ajax内部无法再次使用.想要使用必须再次用js获取其值,通过ajax传递给后台使用. 1.通过页面链接传递参数给下一页 2.可以再下一页后台 ...
- iframe中的页面在IE全屏模式下没有滚动条，正常模式有滚动条
这个问题在其他浏览器都不会出现,唯独IE不行,搜遍了百度以及各大论坛网站,都找不到这个问题的解决方案,只好自己整了. 造成这个问题的原因很简单,就是刚开始的滚动条我用的是iframe的滚动条,ifra ...
- struts2拦截器实现session超时返回登录页面（iframe下跳转到其父页面）
需求:session超时时,返回登录页面,由于页面嵌套在iframe下,因此要跳转到登录页面的父页面,但是首页,登录页面等不需要进行跳转 实现: java文件:SessionIterceptor.ja ...
- 移动端web页面列表类上拉加载，查看详情，iframe嵌套第三方页面遇到的问题以及解决办法
1.移动端上拉加载 网上有很多成熟的插件,比如iscroll.在这里介绍一下用jquery和js写的上拉加载方法.使用原生的去写上拉加载更多需要三个高度去做对比,以新闻类列表举例,首先需要整个dom的 ...
- jquery 在页面上根据ID定位（jQuery锚点跳转及相关操作） 经典
1.锚点跳转简介 Edit 锚点其实就是可以让页面定位到某个位置上的点.在高度较高的页面中经常见到.比如百度的百科页面,wiki中的page内容. 我知道实现锚点的跳转有两种形式,一种是a标签+nam ...
- 弹出iframe内嵌页面元素到父页面并全屏化
(注册博客好久了,一直没舍得添砖加瓦,主要是每次想写点东西的时候,随便搜一搜发现都比我总结的都要好,甚感尴尬,但是总是要开始的,所以这就是我的第一篇博客,也绝不会是最后一篇,废话不多说,直接入正题) ...
- javascript获取iframe框架中页面document对象,获取子页面里面的内容,iframe获取父页面的元素,
javascript获取iframe框架中,加载的页面document对象 因为浏览器安全限制,对跨域访问的页面,其document对象无法读取.设置属性 function getDocument(i ...
随机推荐
- magento -- 给后台分类管理页的分类商品加一栏商品类型
当使用特定分类来控制前台的商品显示时,后台分类管理页的分类商品只有编号.名称.SKU和价格这几栏,选择特定商品相当不便. 可以在这里多加一栏商品类型用来筛选商品,添加的方式很简单. 打开文件/app/ ...
- installshield
转载出处:海洋女神
- Linux发行分支时间轴
官网:http://futurist.se/gldt/ 全图png:http://futurist.se/gldt/wp-content/uploads/12.10/gldt1210.png 全图sv ...
- Windows上的文件合并命令
从Linux转到Windowns后,发现很多好用的shell命令都没有了,但实际情况是Windows一样有DOS时代的命令窗口,在CLI年代用DOS的人也要干活. 比如,今天想将几个单独的sql文件整 ...
- android布局中的divider(目前只知道TableLayout)
目前在genymotion中设置了之后显示不出来行与行之间的分割线,但是在真机上面是没有问题的 1.使用xml属性添加(3.0以上版本) 设置LinearLayout标签的 android:showD ...
- String,StringBuffer和StringBuilder源码解析[基于JDK6]
最近指导几位新人,学习了一下String,StringBuffer和StringBuilder类,从反馈的结果来看,总体感觉学习的深度不够,没有读出东西.其实,JDK的源码是越读越有味的.下面总结一下 ...
- ZOJ 1042 W’s Cipher
原题链接 题目大意:按照规则解码.26个字母分成三组,每一组按照顺时针移位编码.现在已知移动的位数,要求解码. 解法:以前看过一本古典密码学的书,百度贴吧密码吧也有很多经典的加密方法,想什么凯撒移位. ...
- 一个textview实现文字在图片上面的效果
类似于这样的,其实很简单,可是以前用的是imageview+textview.布局实现多写了好多代码.又不能在图片加文字,显得没技术含量. xml代码如下: <TextView android: ...
- C++ Primer : 第二章：变量和基本类型(1)
变量和基本类型之第一篇:基本内置类型和变量 一. (1) C++定义了一套包括算数类型和空类型,这些类型有:布尔类型bool,字符类型char,宽字符类型wchar_t,Unicode字符char16 ...
- MATLAB格式化输出控制 分类： 数学 2015-07-31 23:01 3人阅读 评论(0) 收藏
MATLAB格式化输出控制 format 默认格式 format short 5字长定点数 format long 15字长定点数 format short e 5字长浮点数 format long ...