Fix broken page anchors in iframe with jquery

2020-03-30 03:43:46
OfStack

The application scenario is: there is no scroll bar on the iframe page, and if there is a scroll bar in the parent form, the anchor mark will be invalid, because the anchor point is to scroll the window according to the current window scroll bar.

The solution is to use js to determine whether the page is nested, js to calculate the iframe position in the parent form, and the anchor position in firame, which add up to the parent form's scrolling.

Problems encountered: getting the parent form element (all required locations in the network environment (i.e. http://domain.com) due to domain constraints); The parent form nested multiple iframes to determine if it is the current iframe page.

Code:

Parent form page 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>

Child form page 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(){
//If it's an iframe you need to access it on the network, because js has domain restrictions
//If you don't have an iframe you don't process it,
if(window!==window.top){
//Gets the iframe in the top window. If you have too many iframes nested, modify them yourself
var iframeList=window.top.document.getElementsByTagName('iframe');
for(var i=0;i<iframeList.length;i++){
//Determines whether the current window is an iframe in a loop
if(window.location.toString().indexOf(iframeList[i].getAttribute('src').toString())!=-1){

//Wait for its own iframe to finish loading and add an event to the a anchor
window.top.document.getElementsByTagName('iframe')[i].onload=function(){
//Determines the distance of the iframe from the top of the parent form
var top = window.top.document.getElementsByTagName('iframe')[i].offsetTop;
$('a').each(function(){
var href = $(this).attr('href');
if(href.indexOf('#')!=-1){//Determine if it is an anchor rather than a link
var name = href.substring(href.indexOf('#')+1);
$(this).bind('click',function(){
$('a').each(function(){
if($(this).attr('name')==name){
//Parent window scroll
$(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>