パフォーマンス上の理由からIFRAMEに配置する必要があるUIウィジェットがあるので、アフィリエイトサイトに簡単にシンジケートできます。ウィジェットのUIには、他のページコンテンツの上に表示されるツールチップが含まれています。以下のスクリーンショットを参照するか、サイトにアクセスして実際の動作を確認してください。IFRAME内のコンテンツを親フレームのコンテンツとオーバーラップさせる方法はありますか?
7 に答える
いいえ、それは不可能です。歴史的な理由を無視すると、今日ではセキュリティの脆弱性と見なされます。多くのサイトは、信頼できないコンテンツをiframeに配置します(iframeソースは異なるオリジンであるため、同じオリジンポリシーに従って、親フレームを変更することはできません)。
そのような信頼できないコンテンツがiframeの境界外にコンテンツを配置するメカニズムを持っている場合、(たとえば)親フレームの実際のログインフィールド上に「同一の」ログインdiv(またはその他)を配置し、ユーザー名/パスワード情報を盗む可能性があります。どちらが悪いでしょう。
フレームのコンテンツをフレームの外に流す方法は見つかりませんでしたが、ツールチップを親ドキュメントに移動し、iframe の上 (z-index) に配置することで、それを回避する方法を見つけました。 .
アプローチは次のとおりです
。1)親ドキュメントで iframe を見つけます
。2)ツールチップ要素を DOM 内の場所から削除し、iframe を含む要素内の親ドキュメントに追加します。
3)最初の方法に応じて、おそらくz-indexと位置を調整する必要があります。
parent.document を使用して、iframe の親ドキュメントにアクセスできます。
jQuery(ツールチップ).remove(); var iframeParent = jQuery("#the_id_of_the_iframe", parent.document)[0].parentNode; iframeParent.appendChild(ツールチップ); //Z インデックス、位置を調整します
これは、要件に照らして不適切であるか、実際には役に立たない(!)ため、マークから外れている可能性がありますが、UFrameを確認する価値があるかもしれません。<script>
これはiframeとdivの一種のハイブリッドであり、おそらくウィジェットとしてパッケージ化できます( UFrameと関連するマークアップを吸い込むタグをクライアントに与えるのが最善の策です)。必要なオーバーレイを実現できるかどうかはわかりませんが、試してみる価値はあるかもしれません。申し訳ありませんが、これ以上具体的にすることはできませんが、実際に使用したものではありません。しばらく前にブックマークして、後で参照できるようにしました。
ツールトップが持つことができる値の絶対トップがわかっている場合は、コンテンツの高さ+ツールチップが表示される最大距離であるdivを作成できます。iframeをdivの下部に位置合わせします。iframeとdivが透明であることを確認してください。次に、ツールチップを含むiframeコンテンツが表示されます。これは、ハイライトなどがすべてのブラウザで同じように機能することを確認するという頭痛の種に自分自身を設定していますが。
現在の iframe と提案された div を親 iframe 内にネストしてから、親 iframe をサード パーティにドロップします。
私の知る限り、それはできません。XHRリクエストを使用して、代わりにdivを設定してみませんか?