Use jQuery to fix the invalid page anchor point problem under iframe

The application scenario is: the iframe page has no scroll bar, and a scroll bar appears in the parent window, and the anchor mark will be invalid, because the anchor is based on the current window scroll bar to scroll the window. After becoming a child window, there is no scroll bar and it will not scroll naturally.

The solution is: use js to determine whether the page is nested, use js to calculate the position of the iframe in the parent window, the position of the anchor point in the firame, and the sum of the two becomes the scrolling of the parent window.

Problem encountered: Get the parent form element (because of domain restrictions, all need to be located in the network environment (ie http://domain.com)); the parent form nests multiple iframes, 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" 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>

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(){
//If it is an iframe, it needs to be accessed on the network because there is a domain restriction in js
//No processing if there is no iframe,
if(window!==window.top){
//Get the 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 the current window is an iframe in the loop
if(window.location.toString().indexOf(iframeList[i].getAttribute('src').toString())!=-1){
//Wait for the iframe to load and add an event to the anchor point a
window.top.document.getElementsByTagName('iframe')[i].onload=function(){
//Determine the distance between the iframe and the top of the parent window
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>

<<: About installing python3.8 image in docker

>>: Summary of the top ten problems of MySQL index failure

Detailed explanation of the solution to the error in creating a user and granting permissions in mysql8.0

Use jQuery to fix the invalid page anchor point problem under iframe

Detailed explanation of the solution to the error in creating a user and granting permissions in mysql8.0

The vue project realizes drawing a watermark in a certain area

Detailed discussion of the differences between loops in JavaScript

How to limit the input box to only input pure numbers in HTML

Example analysis of mysql variable usage [system variables, user variables]

CSS3 solution to the problem of freezing on mobile devices (animation performance optimization)

HTML markup language - table tag

Button is stretched on both sides in IE

Detailed deployment of Alibaba Cloud Server (graphic tutorial)

Mysql 5.7.19 free installation version encountered pitfalls (collection)

Recommend

Two ways to exit bash in docker container under Linux

Tutorial on installing mysql under centos7

HTML+CSS+JavaScript to achieve list loop scrolling example code

Vue realizes web online chat function

How to use Maxwell to synchronize MySQL data in real time

Mysql delete duplicate data to keep the smallest id solution

Detailed tutorial on using Docker to build Gitlab based on CentOS8 system

How to configure user role permissions in Jenkins

A brief analysis of MySQL's WriteSet parallel replication

Detailed explanation of Nginx static file service configuration and optimization

Detailed explanation of pid and socket in MySQL

Flash embedded in HTML Solution for embedding Flash files in HTML web page code (Part 2)

How to add a certificate to docker

How to mount a disk in Linux

Tips on MySQL query cache