In diesem Artikel wird die Herausforderung untersucht, Mousedown-Ereignisse an Eltern-Divs zu erfassen, die Cross-Domain-IFrames enthalten. Das Kernproblem besteht darin, dass die Browser-Sicherheitsrichtlinien (gleichorientierte Richtlinien) das Direkt-DOM-Ereignis verhindern, den Inhalt des Cross-Domain-Iframe zuzuh?ren. Diese Art der Ereigniserfassung kann nur erreicht werden, es sei denn, der Name der Iframe -Quelldom?nenname wird kontrolliert und CORs konfiguriert. Der Artikel erl?utert diese Sicherheitsmechanismen im Detail und ihre Einschr?nkungen für Ereignisinteraktionen und liefert m?gliche Alternativen.

Einführung: Verst?ndnis des Kerns des Problems

In der Webentwicklung müssen wir h?ufig Benutzerinteraktionsereignisse in DOM -Elementen wie MouseDown anh?ren. Wenn jedoch ein Iframe in einem übergeordneten DIV -Element einen Iframe enth?lt, insbesondere wenn der vom Iframe geladene Inhalt aus einem anderen Domain -Namen stammt, tritt er auf unerwartete Schwierigkeiten beim Versuch auf, Mousedown -Ereignisse auf dem übergeordneten Div zu erfassen. Der Entwickler stellt fest, dass der MouseDown -Ereignis -H?rer auf der übergeordneten Div nicht ausgel?st wird, wenn der Mausklick im Iframe auftritt.

Betrachten Sie die folgende HTML -Struktur und den Jquery Event -H?rcode:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.13/jquery.min.js"> </script>
<div class="test">
    <a href="/"> test </a>
</div>

<div class="test">
    <iframe src="https://www.google.com/" style="width: 400px; H?he: 300px; Grenze: 1px solide #ccc;"> </iframe>
</div>

 JQuery (". Test"). On ("MouseDown", () => console.log ("Test"));

In diesem Code wird Console.log ("Test") in diesem Code auf das Tag im ersten Div.test klickt. Wenn der Benutzer jedoch im zweiten Div.Test auf den Iframe -Bereich klickt, l?st das MouseDown -Ereignis den H?rer nicht auf dem übergeordneten Div aus, selbst wenn das Iframe ein Kind des Div.Test ist. Der grundlegende Grund dafür liegt in der "gleichorientierten Richtlinie" im Browser-Sicherheitsmodell.

Browser Security Eckpfeiler: Gleiche Ursprungsrichtlinie

Die gleichorientierte Richtlinie ist ein wichtiger Sicherheitsmechanismus im Sicherheitsmodell von Webanwendungen. Es begrenzt, wie Dokumente oder Skripte mit unterschiedlichen Quellen (unterschiedliches Protokoll, Dom?nenname oder Portnummer unterschiedlich sind, dh unterschiedliche Quellen) interagieren. Wenn beispielsweise eine Seite einen Iframe aus einem anderen Dom?nennamen l?dt, kann JavaScript auf dieser Seite nicht direkt auf den DOM -Inhalt des IFRame, JavaScript -Objekte oder auf Ereignisse zugreifen, die im Iframe aufblasen werden.

Speziell für das Problem der Iframe -Ereigniserfassung, wenn der Benutzer auf den internen Bereich des Iframe klickt:

1. Das Mausklickereignis wird zun?chst vom Browser -Kontext des Iframe selbst erfasst.
2. Da der vom Iframe geladene Inhalt aus verschiedenen Quellen stammt (z. B. https://www.google.com/ unterscheidet sich von der Quelle der übergeordneten Seite), beschr?nkt die gleiche Richtlinie den Zugriff auf den IFrame-Inhalt durch die übergeordnete Seite JavaScript streng.
3. Dies bedeutet, dass Ereignisse im Iframe nicht zum Dom -Baum seines übergeordneten Dokuments sprudeln. Der Ereignish?rer des übergeordneten Dokuments kann Ereignisse, die in einem Cross-Domain-Iframe stattfinden, nicht "sehen" oder erfassen ". Dies soll verhindern, dass b?sartige Websites durch Iframes einspritzen und vertrauliche Informationen von Benutzern auf anderen Websites stehlen oder nicht autorisierte Vorg?nge ausführen.

Wechselwirkung zwischen Cross-Dom?nen-Ressourcenfreigabe (CORS) und IFRames

Cross-Origin-Ressourcenfreigabe (CORS, Cross-Origin-Ressourcenfreigabe) ist ein Mechanismus, mit dem Browser homologe Richtlinien entspannen k?nnen. Es informiert den Browser, indem Sie die Serverreaktion spezifische HTTP-Header wie Access-Control-Allow-Origin-Reaktion hinzufügen und Webanwendungen von bestimmten Quellen erm?glichen, um auf ihre Ressourcen zuzugreifen.

Obwohl CORs Cross-Dom?nen-Datenanforderungen implementieren k?nnen, liefert es keine direkte L?sung für das DOM-Ereigniserfassungsproblem in einem Iframe.

• CORS -Konfiguration: CORs müssen vom Quellserver des IFRame -Inhalts konfiguriert werden (z. B. dem Server von https://www.google.com/). Wenn der Entwickler den Quellserver des IFrame nicht steuern kann, kann CORS nicht konfiguriert werden.
• Der Hauptzweck von CORs: CORs wird haupts?chlich verwendet, um Cross-Domain-HTTP-Anforderungen (wie XMLHTTPrequest oder Abruf) zu erm?glichen. Es wird normalerweise nicht direkt verwendet, um nahtlose DOM -Ereignisblasen oder direkte DOM -Operationen zwischen übergeordneten und untergeordneten Dokumenten zu implementieren. Auch wenn der Quellserver des IFRame mit CORS konfiguriert ist, kann das JavaScript des übergeordneten Dokuments immer noch nicht direkt auf die DOM -Struktur des IFRame zugreifen oder auf Ereignisse in ihm anh?ren. Dies liegt daran, dass IFrames ihren unabh?ngigen Browserkontext und den sicheren Sandbox beibehalten.

Sofern Sie den Quelldom?nennamen des IFRame nicht steuern und seinen Server konfigurieren k?nnen, wodurch Ereignisinformationen durch bestimmte APIs (z. B. Postmessage) oder Berechtigungen bestimmter Browser-Erweiterungen bestehen k?nnen, kann das Problem der Cross-Dom?nen-Iframes nicht das Direkter-Ereigniserfassungsproblem l?sen.

Praktische Einschr?nkungen und Alternativen

Zusammenfassend ist es nicht m?glich, Mouedown -Ereignisse direkt im Inneren zu erfassen oder sie daran zu hindern, Ereignisse zu erfassen, ohne die Iframe -Quelldom?ne zu kontrollieren. Dies ist eine grundlegende Komponente des Webbrowser -Sicherheitsmodells, mit dem die Privatsph?re des Benutzers geschützt und b?swillige Skriptangriffe verhindern sollen.

Abh?ngig von Ihren spezifischen Bedürfnissen gibt es jedoch einige Alternativen:

1. Homogener Iframe: Wenn der vom Iframe geladene Inhalt der übergeordneten Seite übereinstimmt (dh, sind das Protokoll, der Dom?nenname und die Portnummer genau gleich), dann k?nnen Sie über die Iframe auf das DOM des Iframe zugreifen.

    // unter der Annahme, dass der Iframe homologe const iframe = document.querySelector ('iframe') ist;
   if (iframe && iframe.contentWindow) {
       Iframe.ContentWindow.Document.AdDeVentListener ('MouseDown', (Ereignis) => {
           console.log ('MouseDown in gleichem Origin-Iframe!', Event.target);
       });
   }

   Dies gilt jedoch offensichtlich nicht für Szenarien wie https://www.google.com/, die den Cross-Domain-Inhalt laden.

2. Transparent Overlay: Wenn Ihr Ziel feststellt, ob der Benutzer auf einen Bereich klickt, der den Iframe enth?lt (anstatt mit dem Inhalt im Iframe zu interagieren), k?nnen Sie eine transparente Div -Overlay über dem Iframe platzieren und auf MouseDown -Ereignisse auf dieser überlagerung anh?ren. Der Vorteil dieses Ansatzes besteht darin, dass Sie Klick -Ereignisse erfolgreich erfassen k?nnen, da das Overlay Teil des übergeordneten Dokuments ist und der gleiche Ursprung wie das übergeordnete Dokument ist. Der Nachteil besteht jedoch darin, dass das Overlay eine Interaktion zwischen dem Benutzer und dem Iframe -Inhalt vollst?ndig blockiert (z. B. Klicken auf Links im IFRame, Scrollen des IFrame -Inhalts, Ausfüllen von Formularen usw.).

   Beispielcode:

    <div class="test container" style="Position: relativ; Breite: 400px; H?he: 300px; Rand: 1px solide #CCC;">
       <div class="iframe-überlay" style="Position: absolut; ober: 0; links: 0; Breite: 100%; H?he: 100%; Z-Index: 10; Hintergrund: transparent;"> </div>
       <iframe src="https://www.google.com/" style="width: 100%; H?he: 100%; Position: Relativ; Z-Index: 1;"> </iframe>
   </div>

    JQuery (". Iframe-Overlay"). On ("MouseDown", () => {
       console.log ("Overlay geklickt! (Iframe -Interaktion ist blockiert)");
   });

   Diese L?sung eignet sich für Szenarien, in denen nur wissen muss, dass der Benutzer den Iframe -Bereich "berührt" und nicht tats?chlich mit dem IFrame -Inhalt interagieren muss.

Zusammenfassen

In der Webentwicklung werden Versuche, MouseDown-Ereignisse auf dem übergeordneten Element mit einem Cross-Domain-Iframe zu erfassen, durch die homologe Richtlinie des Browsers beim Klicken im Iframe streng eingeschr?nkt. Diese Einschr?nkung ist auf wichtige Sicherheitsgründe zurückzuführen und soll Benutzer vor b?swilligen Websites schützen. Sofern der IFrame nicht mit der übergeordneten Seite übereinstimmt oder Sie den Quellserver des IFRame steuern und spezifische APIs wie Postmessage für die Kreuzdokumentkommunikation verwenden k?nnen, ist es normalerweise nicht m?glich, solche Ereignisse direkt zu erfassen. Wenn Sie nur Fl?chenklicks anstelle der tats?chlichen Wechselwirkungen erkennen müssen, k?nnen transparente Overlays eine praktikable Alternative sein. Beachten Sie jedoch, dass sie Interaktionen in allen IFRames blockieren. Das Verst?ndnis dieser Sicherheitsbeschr?nkungen ist für Front-End-Entwickler von entscheidender Bedeutung und kann uns helfen, sicherere und browserkonforme Webanwendungen zu entwerfen.

Das obige ist der detaillierte Inhalt vonErfassen Sie Mouedown-Ereignisse mit übergeordnetem Element, das Cross-Domain-Iframes enth?lt: Prinzipien und Einschr?nkungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!