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

Summary of @ usage in CSS (with examples and explanations)

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

Summary of @ usage in CSS (with examples and explanations)

JavaScript to display hidden form text

Build a severe weather real-time warning system with Node.JS

Summary of methods for creating, listing, and deleting Docker containers on Linux

Introduction to MySQL role functions

MySQL5.6.31 winx64.zip installation and configuration tutorial

Html makes a simple and beautiful login page

Solve the problem of combining AND and OR in MySQL

Detailed explanation of props and context parameters of SetUp function in Vue3

Recommend

Introduction to JavaScript conditional access attributes and arrow functions

How to install MySQL 5.7.29 with one click using shell script

Realize map aggregation and scattering effects based on vue+openlayer

ReactRouter implementation

How to detect if the current browser is a headless browser with JavaScript

Detailed explanation of Linux server status and performance related commands

Detailed tutorial on setting up multiple instances of MySQL 8 on CentOS 7 (you can have as many as you want)

Configure nginx to redirect to the system maintenance page

Detailed explanation of Vue's keyboard events

HTML realizes real-time monitoring function of Hikvision camera

Detailed explanation of the differences between SQL joint query inner join, outer join and cross join

How to output Chinese characters in Linux kernel

How to add a disk in Vmware: Expand the disk

CSS setting div background image implementation code