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

Navicat kann keine Funktionslösungsfreigabe erstellen

Als ich zum ersten Mal eine MySQL-FUNKTION schrie...

Player in Webseite einbetten Einbettungselement Autostart falsch ungültig

Kürzlich musste ich einen Player in eine Webseite ...

Vue erhält Token zur Implementierung des Beispielcodes für die Token-Anmeldung

Die Idee hinter der Verwendung eines Tokens zur L...

Analyse des neuen Ressourcenmanagementsystems von CocosCreator

Inhaltsverzeichnis 1. Ressourcen und Konstruktion...

Javascript-Grundlagen zu integrierten Objekten

Inhaltsverzeichnis 1. Einführung in integrierte O...

So zeigen Sie kleine Symbole in der Browsertitelleiste einer HTML-Webseite an

Genau wie dieser Effekt ist auch die Methode sehr...

CSS3 verwendet die Übergangseigenschaft, um Übergangseffekte zu erzielen

Detaillierte Beschreibung der Eigenschaften Der Z...

Entwerfen Sie eine einfache HTML-Anmeldeoberfläche im CSS-Stil

login.html-Teil: <!DOCTYPE html> <html l...

Detaillierte Erläuterung des Lesevorgangs für Nginx-Anforderungsheaderdaten

Im vorherigen Artikel haben wir erklärt, wie ngin...

Designperspektive Technologie ist ein wichtiges Kapital der Designfähigkeit

Ein Designsoldat fragte: „Kann ich nur reines Des...

HTML-Tabellen-Markup-Tutorial (18): Tabellenkopf

<br />Die Kopfzeile bezieht sich auf die ers...

So stellen Sie ein SpringBoot-Projekt mit Dockerfile bereit

1. Erstellen Sie ein SpringBoot-Projekt und packe...

Eine kurze Diskussion zur MySQL-Indexoptimierungsanalyse

Warum sind die von Ihnen geschriebenen SQL-Abfrag...