埋め込みドキュメントでDOMイベントを処理するにはどうすればよいですか？

Question

私は別のページの中に埋め込まれたHTMLページを持っています。ここでは、埋め込みドキュメント内のリンクをクリックして、親ドキュメントのdivを表示させたいと考えています。私はdivを可視にする方法を知っています（私はjQueryを使用しています）が、埋め込まれたドキュメントのリンクを誰かがクリックしたかどうかを確認するにはどうすればいいですか？

<div id="box1">Text</div> 

<div id="wBox1"> 
    <a href="#" class="hideLink">[X]</a> 
    <object id="objPage" name="foo" type="text/html" data="box.html"></object> 
</div> 

<div id="wProdBox1"> 
    <a href="#" class="hideLink">[X]</a> 
    <object id="objPage2" name="foo" type="text/html" data="box1.html"></object> 
</div> 
<script type="text/javascript"> 
    $("#box1").click(function() { 
    $("#wBox1").show("slow"); 
    $("body").addClass("scroll"); 
    }); 

    $("#product1").click(function() { 
    $("#wProdBox1").show("slow"); 
    $("body").addClass("scroll"); 
    }); 
</script> 

そしてbox.html

<div id="product1">Text box</div> 

だから私はクリックしてindex.htmlの中にdiv要素を開くために必要としている

のindex.html：

は、私はこのような状況がありますdiv id = product1 in box.htmlにあります。

$（window.top.frames [ 'otherframe：あなたは1つのブラウザウィンドウ内のフレームを使用していて、ページが同じ起源を（それらが同じドメインからのもの）がある場合は

Answer 1

別々のブラウザウィンドウ間の相互作用は、ドキュメントと埋め込みドキュメント間の相互作用とはまったく異なります。そのようにmy original answerはあまり助けにはなりません。私はあなたの状況に適用するために私の答えを更新しました。私はまた、あなたのやりたいことをよりよく反映するためにあなたの質問のタイトルを更新しました。

次の技術が埋め込まれた文書内のクリックイベントをバインドするために動作します。埋め込まれた文書から

バインドを、そしてtop.documentで親文書を参照：

$(function() { 
    $("#product1").click(function() { 
     $("#wProdBox1", top.document).show("slow"); 
    }); 
}); 

あるいは、親からのバインドドキュメント、およびdocument.foo.contentDocumentが埋め込まれた文書を参照します。

$(window).load(function() { 
    $(document.foo.contentDocument).ready(function() { 
     $("#product1", document.foo.contentDocument).click(function() { 
      $("#wProdBox1").show("slow"); 
     }); 
    }); 
}); 

しかし...それは幸せな道であり、現代のブラウザでは機能します。それはcontentDocumentをサポートしていないため、第二の技術は、IE7で動作しない

1. ：悲しいことに、我々はIE8とIE7をサポートするために出て仕事をするいくつかの困難を持っています。
2. IE8とIE7では最初の手法は機能しません。これは、埋め込まれたドキュメントがそれがトップウィンドウだと思うからです。すなわち、window.top === window。

問題1を修正するには、それほど悪くはありません。 document.foo.contentDocumentが存在しない場合、我々はdocument.foo.parentWindow.documentを使用します。

var boxDoc = document.foo.contentDocument || document.foo.parentWindow.document; 
$(boxDoc).ready(function() 
{ 
    $("#product1", boxDoc).click(function (e) 
    { 
     $("#wProdBox1").show("slow"); 
    }); 
}); 

問題2を解決するために、私たちは親ウィンドウについての埋め込まれた文書を伝えるために、親文書にコードを追加する必要があります。

boxDoc.parentWindow.parentDocument = document; 

しかし... ChromeとFirefoxがparentWindowをサポートしていません。ドキュメントのウィンドウを取得するには、を使用する必要があり、IE7はdefaultViewをサポートしていません。だから、私たちのコードは次のようになります。

var boxWin = boxDoc.defaultView || boxDoc.parentWindow; 
boxWin.parentDocument = document; 

をその後、我々は、埋め込まれた文書にparentDocumentを参照する必要があります。

$("#wProdBox1", parentDocument).toggle(); 

はここで両方の技術を使用していますworking cross-browser demoです。

Answer 2

は、その後、あなたはこのようなものを使用します']））。find（ "＃someId"）。hide（）;

2つのブラウザウィンドウが完全に異なる場合は、これを行うことはできません。あなたはサーバー経由で何かをする必要があります。

Answer 3

同じオリジンポリシーのため、同じドメインにする必要があります。

ページが<[i]frame> dの場合は、他のページの変数と関数に直接アクセスできます。窓の一つが

var otherWindow = window.open(...); 
otherWindow.onload = function() { 
    otherWindow.showDivs(); // as declared in a script on the other page 
    orDoSomethingWith(otherWindow.document); 
}; 

でjsファイルを開いたときに同じことが2つのページが互いに直接言及していない場合、あなたはwindow.postMessageを使用するかもしれない、可能です。