用jquery开展修补在iframe下的网页页面锚点无效难

运用情景是: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⑴.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())!=⑴){
//等自身的所属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('#')!=⑴){//分辨是不是是锚点而并不是连接
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>