Ich habe ein UI-Widget, das aus Performancegründen in einen IFRAME eingefügt werden muss, und so können wir es leicht zu Affiliate-Sites syndizieren. Die Benutzeroberfläche für das Widget enthält QuickInfos, die über dem Inhalt der anderen Seite angezeigt werden. Siehe Screenshot unten oder go to the site, um es in Aktion zu sehen. Gibt es eine Möglichkeit, Inhalte innerhalb des IFRAME mit dem Inhalt des übergeordneten Frames zu überlappen?Gibt es eine Möglichkeit, dass Inhalt von einem IFRAME auf den übergeordneten Frame überläuft?
Antwort
Nein, das ist nicht möglich. Jegliche historische Gründe ignorierend, würde es heutzutage als eine Sicherheitsschwachstelle angesehen - z. Viele Websites stellen nicht vertrauenswürdigen Inhalt in Iframes (die Iframe-Quelle ist ein anderer Ursprung und kann den übergeordneten Frame nicht ändern, je nach der gleichen Herkunftsrichtlinie). Wenn ein solcher nicht vertrauenswürdiger Inhalt einen Mechanismus hatte, um Inhalt außerhalb der Grenzen des iframes zu platzieren, könnte er (zum Beispiel) ein "identisches" log-div (oder was auch immer) über die echten Login-Felder eines Eltern-Frames platzieren und somit stehlen Benutzername/Passwort Informationen. Was würde saugen.
Soweit ich es weiß, kann nicht getan werden. Warum nicht eine XHR-Anfrage verwenden und stattdessen ein div auffüllen?
Das ist, was wir gerade machen, aber - wie oben erwähnt - ist eine der Anforderungen, Websites von Drittanbietern zu erlauben, den IFRAME als Widget auf ihren Seiten einzufügen. Die aktuelle Implementierung befreit auch die Benutzeroberfläche, aber ich bin zuversichtlich, dass ich das umgehen kann. –
Sie können einfach eine XHR-API angeben und anderen erlauben, sich an sie anzuschließen, wie sie es für angemessen halten (und ihnen natürlich erlauben, Ihr Scripting zu deaktivieren, aber so ist es). – eyelidlessness
Das wäre nur sicher, wenn Sie dem Inhalt/Widget tatsächlich vertrauen - ein Vorteil von iframes ist, dass sie Inhalte effektiv sandboxen (mit freundlicher Genehmigung der gleichen Herkunftsrichtlinie) – olliej
Dies kann falsch sein, entweder weil es in Anbetracht Ihrer Anforderungen ungeeignet ist, oder es kann nicht wirklich helfen (!), Aber es könnte sich lohnen, UFrame zu überprüfen. Es ist eine Art Hybrid von iframe und div, und könnte wahrscheinlich als Widget verpackt werden (am besten wäre es, den Kunden einen <script>
-Tag zu geben, der UFrame und das entsprechende Markup aufsaugen würde). Was ich nicht sicher bin, ist, ob du das Overlay, das du benötigst, erreichen kannst, aber es ist möglicherweise ein Spiel wert, mit dem du herumspielen kannst. Entschuldigung, ich kann nicht genauer sein, aber es ist nicht etwas, das ich selbst benutzt habe, ich habe es vor einiger Zeit zur zukünftigen Referenz mit einem Lesezeichen versehen.
Wenn Sie den absoluten oberen Wert kennen, den das Werkzeugoberteil haben kann, können Sie ein div erstellen, das die Höhe des Inhalts und die höchste Entfernung darstellt, in der die QuickInfo angezeigt wird. Richten Sie den iframe am unteren Rand des div aus. Stellen Sie sicher, dass Iframe und Div transparent sind. dann sollte der Iframe-Inhalt mit der QuickInfo angezeigt werden. Obwohl dies Ihre Selbst Einstellung für die Kopfschmerzen, um sicherzustellen, dass Sachen wie Hervorhebung in allen Browsern gleich funktionieren.
Ich konnte keinen Weg finden, um den Inhalt des Rahmens aus dem Rahmen herauszufließen, aber ich habe einen Weg gefunden, um ihn herumzuhacken, indem ich den Tooltip in das übergeordnete Dokument verschiebe und ihn darüber lege (z- Index) der Iframe.
Der Ansatz war:
1) finden die iframe im übergeordneten Dokument
2) entfernen Sie den Tooltip Element, von wo es in der DOM, und fügen Sie ihn in das übergeordnete Dokument innerhalb des Elements, die Ihre iframe enthält.
3) Sie müssen wahrscheinlich den Z-Index und die Positionierung anpassen, je nachdem, wie Sie das zuerst gemacht haben.
Sie können über parent.document auf das übergeordnete Dokument eines iframe zugreifen.
jQuery(tooltip).remove(); var iframeParent = jQuery("#the_id_of_the_iframe", parent.document)[0].parentNode; iframeParent.appendChild(tooltip); //adjust z-index, positioning
Dies funktioniert nicht, wenn diese beiden Dokumente aus verschiedenen Domänen stammen. – keaukraine
Nest Ihres aktuelles iframe und die vorgeschlagene div, innerhalb eines übergeordneten iframe, fallen dann in Ihren Eltern iframe 3.e Parteien, Beste aus beiden Welten!
Nur entdeckt, dass '