Verwenden Sie jQuery, um das Problem mit ungültigen Seitenankerpunkten unter Iframe zu beheben

Das Anwendungsszenario ist: Die Iframe-Seite hat keine Bildlaufleiste, und im übergeordneten Fenster wird eine Bildlaufleiste angezeigt. Die Ankermarkierung ist ungültig, da der Anker auf der Bildlaufleiste des aktuellen Fensters basiert, um das Fenster zu scrollen. Nachdem es zu einem untergeordneten Fenster geworden ist, gibt es keine Bildlaufleiste und es wird nicht auf natürliche Weise gescrollt.

Die Lösung lautet: Verwenden Sie js, um zu bestimmen, ob die Seite verschachtelt ist, verwenden Sie js, um die Position des Iframes im übergeordneten Fenster zu berechnen, die Position des Ankerpunkts im Firame, und die Summe der beiden ergibt das Scrollen des übergeordneten Fensters.

Aufgetretenes Problem: Holen Sie sich das übergeordnete Formularelement (aufgrund von Domänenbeschränkungen müssen sich alle in der Netzwerkumgebung befinden (d. h. http://domain.com)); das übergeordnete Formular verschachtelt mehrere Iframes. Bestimmen Sie, ob es sich um die aktuelle Iframe-Seite handelt.

Code:

Übergeordnete Formularseite index.html

Code kopieren

Der Code lautet wie folgt:

<!doctype html>
<html>
<Kopf>
<Titel></Titel>
<style type="text/css">
*{
Rand: 0;
Polsterung: 0;
Rand: 0;
}
html,
Körper{
Breite: 100 %;
Höhe: 100%;
}
</Stil>
</Kopf>
<Text>
<div Stil="Breite:100%;Hintergrund:#f00;Höhe: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>

Unterformularseite iframe.html

Code kopieren

Der Code lautet wie folgt:

<!doctype html>
<html>
<Kopf>
<Titel></Titel>
<style type="text/css">
A{
Polsterung: 5px;
Rand: 1px durchgezogen #f00;
schweben: links;
Anzeige: Block;
Rand rechts: 5px;
}
div{
Breite: 80%;
Rand: 10px automatisch;
Höhe: 500px;
Rand: 1px durchgezogen #f00;
Schriftgröße: 30px;
}
</Stil>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<Skripttyp="text/javascript">
$(Funktion(){
//Wenn es sich um ein Iframe handelt, muss darauf über das Netzwerk zugegriffen werden, da in js eine Domänenbeschränkung vorliegt
//Keine Verarbeitung, wenn kein Iframe vorhanden ist,
wenn(Fenster!==Fenster.oben){
//Holen Sie sich das Iframe im oberen Fenster. Wenn zu viele Iframes verschachtelt sind, ändern Sie sie bitte selbst
var iframeList=window.top.document.getElementsByTagName('iframe');
für(var i=0;i<iframeList.length;i++){
//Bestimmen Sie in der Schleife, ob das aktuelle Fenster ein Iframe ist
wenn(Fenster.Standort.toString().indexOf(iframeList[i].getAttribute('src').toString())!=-1){
//Warten Sie, bis das Iframe geladen ist, und fügen Sie dem Ankerpunkt ein Ereignis hinzu.
window.top.document.getElementsByTagName('iframe')[i].onload=function(){
// Bestimmen Sie den Abstand zwischen dem Iframe und der Oberseite des übergeordneten Fensters
var top = window.top.document.getElementsByTagName('iframe')[i].offsetTop;
$('a').jedes(Funktion(){
var href = $(diese).attr('href');
if(href.indexOf('#')!=-1){//Beurteilen, ob es sich eher um einen Ankerpunkt als um einen Link handelt
var name = href.substring(href.indexOf('#')+1);
$(this).bind('klicken',function(){
$('a').jedes(Funktion(){
wenn($(this).attr('name')==name){
// Scrollen im übergeordneten Fenster
$(window.parent).scrollTop($(this).offset().top+top);
}
});
});
}
});
}
}
}
}
});
</Skript>
</Kopf>
<Text>
<a href="#a">ein</a>
<a href="#b">b</a>
<a href="#c">c</a>
<a href="#d">d</a>
<div><a href="" name="a">Ein</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>

<<: Informationen zur Installation des Python3.8-Images im Docker

>>: Zusammenfassung der zehn häufigsten Probleme bei MySQL-Indexfehlern

So installieren Sie Nginx in Docker

Artikel

MySQL-Zeitdifferenzfunktionen (TIMESTAMPDIFF, DATEDIFF), Funktionen zur Berechnung von Datumsumrechnungen (date_add, day, date_format, str_to_date)

Artikel

Verwenden Sie jQuery, um das Problem mit ungültigen Seitenankerpunkten unter Iframe zu beheben

So installieren Sie Nginx in Docker

MySQL-Zeitdifferenzfunktionen (TIMESTAMPDIFF, DATEDIFF), Funktionen zur Berechnung von Datumsumrechnungen (date_add, day, date_format, str_to_date)

jQuery erzielt Ein- und Ausblendeffekte

Lösen Sie das Installationsproblem der mysql8.0.19 Winx64-Version

Lösung für Docker-Container, der Schriftarten wie Songti nicht erkennt

Beispiel für die Konvertierung von Webpack-Bildern in Base64

Lösen Sie das Problem des MySql8.0-Prüfungsfehlers der Transaktionsisolationsebene

JavaScript zum Implementieren des Click-to-Switch-Bestätigungscodes und der Bestätigung

Erste Zusammenfassung des Website-Erstellungs-Tutorials für Anfänger

So führen Sie den Taskplan crontab alle paar Minuten in einem bestimmten Zeitraum unter Linux automatisch aus

Artikel empfehlen

Durch die Anpassung des mobilen Endgeräts wird px automatisch in rem umgewandelt

Detaillierte Erklärung der Docker-Datenspeichervolumes

VMware Workstation ist nicht mit Device/Credential Guard kompatibel

Tutorial zur Installation von JDK und Tomcat unter Linux CentOS

Detaillierte Erklärung der Entwurfsmuster des JavaScript-Frameworks

Ein genauerer Blick auf die Unterschiede zwischen Link und @import

Erklärung zur Änderung des npm Taobao-Spiegels

15 Zeilen CSS-Code können zum Absturz von Apple-Geräten führen, und das neueste iOS 12 ist nicht immun

Benutzerdefinierter Kalendereffekt in JavaScript

Grafisches Tutorial zur Installation und Konfiguration der MySQL 8.0.15 Winx64-Dekomprimierungsversion

MySQL 5.7.18 MSI-Installations-Grafik-Tutorial

JS-Implementierung des Karussell-Karussell-Falls

Statische IP-Konfigurationsmethode für die Centos8-Brücke in der virtuellen VMware-Maschine

Verbindung zum lokalen MySQL über Socket-Lösung „/tmp/mysql.sock“ nicht möglich

Detaillierte Schritte zur Installation von MinIO auf Docker