web-dev-qa-db-ja.com

IFRAMEからコンテンツを親フレームにオーバーフローさせる方法はありますか？

パフォーマンス上の理由と、アフィリエイトサイトに簡単にシンジケートできるようにするために、IFRAMEに配置する必要があるUIウィジェットがあります。ウィジェットのUIには、他のページコンテンツの上に表示されるツールチップが含まれています。下のスクリーンショットまたはサイトに移動を参照して、実際の動作を確認してください。 IFRAME内のコンテンツを親フレームのコンテンツとオーバーラップさせる方法はありますか？

Tool-tip content needs to overlap parent frame content

javascriptcssiframetooltip
46
Andrew Hedges

いいえ、それは不可能です。歴史的な理由を無視すると、今日ではセキュリティの脆弱性と見なされます-たとえば。多くのサイトは信頼できないコンテンツをiframeに入れています（iframeソースは別のOriginであるため、同じOriginポリシーに従って親フレームを変更することはできません）。

そのような信頼できないコンテンツにiframeの境界の外にコンテンツを配置するメカニズムがあった場合、（たとえば）「同一の」ログインdiv（またはその他）を親フレームの実際のログインフィールドに配置し、ユーザー名/パスワード情報を盗む可能性があります。 。どれが悪いでしょう。

80
olliej

フレームのコンテンツをフレームから流し出す方法を見つけることができませんでしたが、ツールチップを親ドキュメントに移動してiframeの上（z-index）に配置することで、フレームをハックする方法を見つけました。

アプローチは：
1）親ドキュメントでiframeを見つけます
2）DOM内のツールチップ要素を削除し、iframeを含む要素内の親ドキュメントに追加します。
3）最初にそれをどのように行ったかに応じて、おそらくz-indexと位置を調整する必要があります。

Parent.documentを使用して、iframeの親ドキュメントにアクセスできます。

 jQuery（tooltip）.remove（）; 
 var iframeParent = jQuery（ "＃the_id_of_the_iframe"、parent.document）[0] .parentNode; 
 iframeParent.appendChild（tooltip） ; 
 // Zインデックスの調整、配置
9
DrShaffopolis

これは、要件に照らして不適切であるか、実際には役に立たない（！）かもしれませんが、チェックアウトする価値がある Frame のどちらかで、適切ではない可能性があります。これは、iframeとdivの一種のハイブリッドで、おそらくウィジェットとしてパッケージ化できます（最善の策は、クライアントに<script>タグは、UFrameと関連するマークアップを吸い込みます）。必要なオーバーレイを実現できるかどうかはわかりませんが、試してみる価値はあります。申し訳ありませんが、具体的に説明することはできませんが、実際に使用したことはありません。後で参照できるようにブックマークしておいただけです。

1
Luke Bennett

ツールの上部で絶対値の上限がわかっている場合は、コンテンツの高さ+ツールのヒントが表示される最大距離であるdivを作成できます。iframeをdivの下部に揃えます。 iframeとdivが透明であることを確認してください。次に、ツールチップを含むiframeコンテンツが表示されます。ただし、これは、強調表示などのすべてのブラウザで同じように機能することを確認するという頭痛の種にあなた自身を設定しています。

1
gltovar

現在のiframeと提案されたdivを親iframe内にネストし、次に親iframeをサードパーティにドロップします。両方の長所があります。

1
Jason Walton

私の知る限り、それは不可能です。代わりにXHRリクエストを使用してdivに入力しないのはなぜですか？

0
eyelidlessness