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

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

Lösung für großen Zeilenabstand (5 Pixel mehr im IE)

Vue realisiert den Fortschrittsbalken-Änderungseffekt

Zusammenfassung zur Verwendung des MySQL-Autorisierungsbefehls „grant“

MySQL führt SQL-Datei aus und meldet Fehler Fehler: Unbekannte Speicher-Engine „InnoDB“-Lösung

Verwendung von „Select“, „Distinct“ und „Limit“ in MySQL

CentOS7 verwendet yum zur Installation von MySQL 8.0.12

Konfigurationshandbuch für den Lastenausgleich auf Ebene 4 von Nginx

Spezifische Verwendung von Docker Anonymous Mount und Named Mount

So implementieren Sie abgerundete Ecken mit CSS3 unter Verwendung von JS

So vermeiden Sie die Duplizierung von Daten beim Einfügen in einen MySql-Batch

Artikel empfehlen

Anweisungen zur Verwendung des Datenbankverbindungspools Druid

Ursachen und Lösungen für den MySQL-Fehler „zu viele Verbindungen“

Lassen Sie uns über die Größen- und Längenbeschränkungen verschiedener Objekte in MySQL sprechen

Informationen zum Ausdruck „wenn Komma enthält“ in JavaScript

Detaillierte Schritte zum manuellen Konfigurieren der IP-Adresse in Linux

MySQL-Triggersyntax und Anwendungsbeispiele

Ein praktischer Bericht zur Fehlerbehebung bei einem Anstieg der Redis-Verbindungen in Docker

Einführung in die schnelle Docker-Bereitstellung eines SpringBoot-Projekts

Einige Methoden zur Optimierung der Abfragegeschwindigkeit bei der Verarbeitung großer Datenmengen durch MySQL

CentOS 7 Installations- und Konfigurations-Tutorial unter VMware10

Detaillierte Erklärung zum automatischen Hinzufügen eines Präfix-Plugins nach der CSS3-Verpackung: Autoprefixer

JavaScript implementiert Produktdetails der E-Commerce-Plattform

So verwenden Sie LibreOffice zum Konvertieren von Dokumentformaten unter CentOS

17 hervorragende Webdesigns, sorgfältig von Startups entwickelt

Der URL-Wert des SRC- oder CSS-Hintergrundbildes ist der Base64-codierte Code