5

そうです、これは変です。私はたくさんのグーグルをして、正しい方向に私を向けているように見える何百もの記事を見つけましたが、どれもうまくいかないようです.

これが私がやろうとしていることの最新の化身です：

親ページ

<html>
<head>
    <script>
    $('#mainWindow').ready(function () {
       $('#mainWindow').contents().find('#clickThis').live('click', function () {
           alert('Click detected!');
        });
    });
    </script>
</head>
<body>
    <iframe id="mainWindow" name="mainWindow" src="myMainPage.aspx" style="border: 0; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%"></iframe>
    <iframe src="myOtherPage.aspx"></iframe>
</body>
</html>

フレーム付きページ (mainWindow に配置)

<html>
    ' LOADS OF STUFF INCLUDING:
    <li id="clickThis">Click This</li>
</html>

ここで明らかにしようとしているのは、ユーザーが子フレームのボタンをクリックしたときに、親ページでコードを実行することです。

フレーム内のページが変更された場合でも、親によってキャプチャされるように機能する必要がliveあります（この要素は、フレームにロードされるすべてのページに存在します）

他のさまざまな検索に従って、親から iFrame へ、および iFrame から iFrame へ、iFrame 全体でコードを実行できましたが、iFrame から親への実行が問題を引き起こしています。

上記のコードは何もしませんし、私が試した他のオプションも何もしません!!

*編集して追加する必要があります。すべてのファイルは同じサーバー上にあります。クロス ドメインの問題は問題ではありません。

4

4 に答える 4

4

これは私にとってはうまくいきます：

$('#myframe').contents().on('click', function () {
    $('#result').text('clicked');
});​

コンテンツドキュメントの一部だけでイベントをキャプチャしたい場合は、単にではなく.contents().find(<selector>)( <selector>being eg 'body') を使用します。.contents()

注意事項: すべてのページが同じ下に存在する必要があります。そうdocument.domainしないと、JavaScript 呼び出しが失敗します。これは、コンソールでセキュリティ例外として表示されます。これは、同一生成元ポリシーが原因で発生します。

于 2012-07-10T12:59:17.070 に答える
2

iframe 内にもいくつかのデータをキャプチャしたい場合は、これでうまくいきます。複数の画像を含む iframe 要素があります。iframe は親ページ内にレンダリングされます。iframe 内でどの画像をクリックしても、その画像の ID が親に送り返されます。

iframe 内:

<script>
function vote(e) {
            myMessage = e;
            window.parent.postMessage(myMessage, "*");
            return false;
        }
</script>

        <body><div>
        <img id="Image1" src="file:///Users/abcd/Desktop/1.jpeg" width="200px" onclick="vote(this.id)">
        </div></body>

親ページの内側:

</script>
function displayMessage (evt) {
        var message = "You voted " + evt.data;
        document.getElementById("received-message").innerHTML = message;
    }

    if (window.addEventListener) {
        // For standards-compliant web browsers
        window.addEventListener("message", displayMessage, false);
    }
    else {
        window.attachEvent("onmessage", displayMessage);
    }
</script>

 <body><div id="received-message"></div></body>

これは、クリックをキャプチャするだけでなく、iframe 内でクリックされている要素の ID もキャプチャします。また、これには JQuery は必要ありません。

于 2017-01-11T11:39:45.760 に答える
2

方法、答えが遅すぎますが、同じ問題があり、以下のコードはすべてのブラウザーで機能します。

$('#myiframe').on('load', function () {
   $(this).contents().on('click', function () {
      alert('Click detected!');
   })
})

ハンドラーをアタッチonclickしますが、iframe が読み込まれた後でのみです。私はこれを後世のために、そして同じ質問への答えを探している他の人のためにここに残しておきます.

于 2015-12-22T19:14:53.060 に答える
0

findそこにない可能性のある要素にイベントリスナーをバインドするために使用しているのはなぜですか? 試してみませんか：

$('#mainWindow').ready(function()
{
    $('#clickThis').on('click',function()
    {
        alert($(this).html());//or something
    });
});

ところで: コードは の ready コールバック内にあるため、2 回目の使用は DOM ツリーを 2 回スキャンするため、#mainWindow必要ありません。いずれにしても mainWindow 要素を参照するため、orを$('#mainWindow')使用するだけです。this$(this)

on が機能しない場合は、最新バージョンの jQuery が含まれているかどうかも確認することを忘れないでください。それも、 on が機能しない理由である可能性があります。

于 2012-07-10T12:40:58.757 に答える