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

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

Artikel empfehlen

So verteilen Sie mit CSS zwei Schaltflächen auf der linken und rechten Seite desselben übergeordneten Tags

In diesem Artikel wird hauptsächlich die Methode ...

Grundlagen der funktionalen Programmierung in JavaScript

Inhaltsverzeichnis 1. Einleitung 2. Was ist funkt...

Detaillierte Erläuterung der benutzerdefinierten MySQL-Funktionen und gespeicherten Prozeduren

Vorwort Dieser Artikel stellt hauptsächlich die r...

Syntax-Alias-Problem basierend auf Löschen in MySQL

Inhaltsverzeichnis MySQL-Löschsyntax-Aliasproblem...

Wie man mit React elegant CSS schreibt

Inhaltsverzeichnis 1. Inline-Stile 2. Importmetho...

Studieren Sie die Verwendung von Zeichen anstelle von Bildern, um abgerundete oder scharfe Ecken zu erzielen

Bitte sehen Sie sich den folgenden Screenshot an,...

Lassen Sie uns ausführlich über Vues Mixin und Vererbung sprechen

Inhaltsverzeichnis Vorwort Mischen Mixin-Hinweis ...

Einige Erkenntnisse und Gedanken zu iframe

Diese Geschichte beginnt heute mit einer unerwarte...

Bereitstellung des Quellcodes des Docker-Containers. httpd verwendet Speichervolumen, um die Website bereitzustellen (empfohlen).

Inhaltsverzeichnis Stellen Sie httpd mit dem Quel...

Dockers flexible Implementierung zum Aufbau einer PHP-Umgebung

Verwenden Sie Docker, um eine flexible Online-PHP...

Mysql-Trigger werden in PHP-Projekten zum Sichern, Wiederherstellen und Löschen von Informationen verwendet

Beispiele: Über den PHP-Hintergrundcode können Si...

CSS-Listenverschiebung, um zu verhindern, dass sie von unten verdeckt wird, und um sich an die längere Verarbeitung des Bildschirmmodells anzupassen

1. Wenn das mobile Endgerät die Listenverschiebun...

Was tun, wenn Sie Ihr MySQL-Passwort vergessen?

Zweimal Ihr MySQL-Passwort vergessen? Zuerst habe...

MySQL-Gleitaggregation/Jahresaggregation – Prinzip und Anwendungsbeispielanalyse

In diesem Artikel werden anhand von Beispielen di...

jQuery implementiert die Funktion zum Ziehen von Bildern mit der Maus

In diesem Beispiel wird jQuery verwendet, um eine...