Zwei Verwendungen von iFrame-Tags in HTML

Zwei Verwendungen von iFrame-Tags in HTML

Ich habe kürzlich an einem Projekt gearbeitet – Budou Collection. Kurz gesagt, es geht darum, die Bilder, die Ihnen gefallen, auf der Budou-Seite zu sammeln. Dabei werden viele Aspekte von iframe verwendet, die wie folgt zusammengefasst werden können:
1. Als Pop-up-Schicht zur Abdeckung des Bodens

Wenn Sie schon einmal eine schwarze Maske erstellt haben, die die gesamte Seite abdeckt, und der Benutzer zufällig IE6 verwendet und sich auf der Seite zufällig ein Auswahlelement befindet, werden Sie Kopfschmerzen bekommen (auf die Prinzipien werde ich hier nicht näher eingehen). Wir werden feststellen, dass das Popup-DIV die Auswahl nicht abdecken kann. Daher ist unser Iframe an der Reihe, anzuzeigen. Die Logik ist wie folgt:

Platzieren Sie ein Iframe auf derselben Ebene wie das Popup-Div
Stellen Sie sicher, dass der Z-Index des Iframes kleiner ist als der Z-Index des Popup-Divs
Fügen Sie Fenstergrößenänderungs- und Scroll-Ereignisse hinzu, um sicherzustellen, dass der Iframe die gesamte Seite abdecken kann

Teil des Codes

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. var iframe = U .isie6() ? ' < iframe   Stil = "Position: absolut; links: 0; oben: 0; Z-Index: 2000000; Filter: Alpha (Deckkraft = 0); Breite: 100 %; Höhe: ' + ds.height + '"   Rahmenrand = "0" > </ iframe > ': '';
  2. $container.anhängen(iframe).anhängenTo($body);

2. Domänenübergreifendes Setzen von Cookies

Es gibt zwei Domänen, a.com und b.com. Unter bestimmten Bedingungen erscheinen einige der Funktionen von b auf Seite a. Manchmal müssen Sie beim Bedienen von Seite a einige Vorgänge mit den Cookies der Domäne b.com durchführen, um den nächsten Besuch des Benutzers zu erleichtern. Wir müssen lediglich ein Iframe (dynamisch oder fest) zu Seite A hinzufügen, wobei das src-Attribut auf eine Proxy-Seite von B verweist, und Cookie-Operationen auf dieser Seite durchführen.

<<:  Klassen in TypeScript

>>:  Detaillierte Schritte zur Installation von Nginx auf dem Apple M1-Chip und zum Bereitstellen eines Vue-Projekts

Artikel empfehlen

Lösen Sie den Konflikt zwischen Docker und VMware

1. Docker-Startproblem: Problem gelöst: Sie müsse...

Alibaba Cloud Server Ubuntu Konfigurations-Tutorial

Da für den Import benutzerdefinierter Ubuntu-Imag...

Tutorial zur Installation und Konfiguration von MySQL 5.7 unter CentOS7 (YUM)

Installationsumgebung: CentOS7 64-Bit, MySQL5.7 1...

So legen Sie mit CSS eine Hintergrundunschärfe fest

Beim Erstellen einiger Seiten müssen wir häufig H...

Was bedeutet das n nach int(n) in MySQL?

Sie wissen vielleicht bereits, dass die Länge 1 v...

js, um einen einfachen Front-End-Paging-Effekt zu erzielen

Einige Projekte haben ein relativ einfaches Gesch...

Teilen Sie einige wichtige Interviewfragen zum MySQL-Index

Vorwort Ein Index ist eine Datenstruktur, die ein...

Zwei Möglichkeiten zur Installation von Python3 auf Linux-Servern

Erste Methode Alibaba Cloud- und Baidu Cloud-Serv...

Zusammenfassung des Speicherorts und Tipps für Docker-Konfigurationscontainer

Tipps zur Verwendung von Docker 1. Bereinigen Sie...

Drei Methoden zum Ändern des Hostnamens von Centos7

Methode 1: Hostnamectl-Änderung Schritt 1 Überprü...

So implementieren Sie geplante MySQL-Aufgaben unter Linux

Annahme: Die gespeicherte Prozedur wird täglich v...