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

Detailed explanation of the use of Vue card-style click-to-switch image component

This article shares the vue card-style click-to-s...

Differences between proxy_pass in two modules in nginx

1. The proxy_pass directive of the 1.ngx_stream_p...

Use of Linux watch command

1. Command Introduction The watch command execute...

Detailed explanation of primitive values ​​and reference values ​​in ECMAScript

Table of contents Preface What are dynamic proper...

WebWorker encapsulates JavaScript sandbox details

Table of contents 1. Scenario 2. Implement IJavaS...

Analysis and opinions on the design of the product details description page on Taobao website (picture)

...

Will Update in a Mysql transaction lock the table?

Two cases: 1. With index 2. Without index Prerequ...

Detailed Analysis of the Differences between break and last in Nginx

Let's talk about the difference first last, t...

JS implements random roll call system

Use JS to implement a random roll call system for...

A brief discussion on DDL and DML in MySQL

Table of contents Preface 1. DDL 1.1 Database Ope...

js implements array flattening

Table of contents How to flatten an array 1. Usin...

MySQL index optimization: paging exploration detailed introduction

Table of contents MySQL Index Optimization Paging...

Nginx Layer 4 Load Balancing Configuration Guide

1. Introduction to Layer 4 Load Balancing What is...

UrlRewriter caching issues and a series of related explorations

When developing a website function, the session c...

Detailed explanation of the adaptive adaptation problem of Vue mobile terminal

1. Create a project with vue ui 2. Select basic c...