Using jQuery to fix page anchor failure in iframe

Time:2019-12-8

The application scenario is: iframe page does not have a scroll bar. If the scroll bar appears in the parent form, the anchor mark will be invalid. Because the anchor is based on the current window scroll bar to scroll the window. After it becomes a child form, there is no scroll bar, so it will not scroll.

The solution is: JS is used to judge whether the page is nested, JS is used to calculate the position of iframe in the parent form and anchor point in the firename, and the two are added to form the scrolling of the parent form.

Problem encountered: get the parent form element (due to domain restrictions, all need to be oriented in the network environment (that is, http://domain.com)); nest multiple iframes in the parent form to determine whether it is the current iframe page.

Code:

Parent form page index.html

Copy code

The code is as follows:

<!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″ src=”iframe.html?a=b&c=d” style=”width:100%;height:2060px;”></iframe>
<iframe name=”iframe2″ src=”iframe.html?a=d&c=b” style=”width:100%;height:2060px;”></iframe>
</body>
</html>

Subform page iframe.html

Copy code

The code is as follows:

<!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 needs to be accessed in the network because there are domain restrictions in JS
//If there is no iframe, it will not be processed,
if(window!==window.top){
//Get iframe in the top window. If there are too many iframes nested, please modify them yourself
var iframeList=window.top.document.getElementsByTagName(‘iframe’);
for(var i=0;i<iframeList.length;i++){
//Determine whether iframe in current window loop
if(window.location.toString().indexOf(iframeList[i].getAttribute(‘src’).toString())!=-1){
//Wait for your iframe to load and add events to the a anchor
window.top.document.getElementsByTagName(‘iframe’)[i].onload=function(){
//Determines how far iframe is 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) {/ / judge whether it is an anchor point 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 scrolling
$(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>