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

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

Recommend

How to shut down/restart/start nginx

closure service nginx stop systemctl stop nginx s...

CSS realizes that the left side of the webpage column is fixed and automatically adjusts the position when scrolling to the bottom

Preview address: https://ovsexia.gitee.io/leftfix...

Is a design that complies with design specifications a good design?

In the past few years of my career, I have writte...

CSS implements various loading effects with parsing process

HTML <div class="spinner"></di...

How to set a fixed IP in Linux (tested and effective)

First, open the virtual machine Open xshell5 to c...

Zabbix monitoring docker application configuration

The application of containers is becoming more an...

Detailed explanation of COLLATION examples in MySQL that you may have overlooked

Preface The string types of MySQL database are CH...

Realize the CSS loading effect after clicking the button

Since there is a button in my company's produ...

React Native scaffolding basic usage detailed explanation

Build the project Execute the command line in the...

The difference between MySQL execute, executeUpdate and executeQuery

The differences among execute, executeUpdate, and...

Example of how to upload a Docker image to a private repository

The image can be easily pushed directly to the Do...

How to configure the Runner container in Docker

1. Create a runner container mk@mk-pc:~/Desktop$ ...

A brief analysis of the responsiveness principle and differences of Vue2.0/3.0

Preface Since vue3.0 was officially launched, man...

How to use ES6 class inheritance to achieve a gorgeous ball effect

Table of contents introduce Implementation steps ...

How to compare two database table structures in mysql

During the development and debugging process, it ...