3

以下は、スクリプトを使用して iframe のコンテンツを入力するコードのスニペットです。

<!doctype html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script>
        $(document).ready(function() {
            $('iframe').contents().find('body').html('<script>console.log($("div"))<\/script>');
        });
        </script>
    </head>
    <body>
        <div>Test</div>
        <iframe />
    </body>
</html>

実行すると、iframe が親の DOM にアクセスできることがわかり、jQuery セレクターによって div が選択されていることがわかります。iframe には jQuery が含まれていませんが、親の jQuery オブジェクトにアクセスできます。

ただし、iframe src インクルージョンを介して同じことを記述すると、動作が異なります。

test.html:

<!doctype html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    </head>
    <body>
        <div>Test</div>
        <iframe src="another.html">
    </body>
</html>

another.html:

<!doctype html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script>
        $(document).ready(function() {
            console.log($('div'));
        });
        </script>
    </head>
    <body>

    </body>
</html>

ページに div がリストされていないことがわかります。さらに、子ページに jQuery js を含めないと、エラーがスローされます。

両方のページが同じドメインにあることに注意してください。したがって、同一オリジン ポリシーの問題はありません。

私の質問は次のとおりです。

  1. 2 - a の動作が異なるのはなぜですか。親から iframe DOM を操作する b. src経由でiframeコンテンツを含めますか?
  2. 親が子にアクセスできるようにし、その逆はできない方法はありますか?
4

1 に答える 1

1

So the first bit of code gives 1 and the second bit of code gives 0?

That seems correct.

In the first example $ is bound to the parent frame. In the second example, since you have a new instance of jQuery it's bound to the iframe.

In:

$(document).ready(function() {
    $('iframe').contents().find('body').html('<script>console.log($("div"))<\/script>');
});

jQuery's html function will do an eval on the script-part of the inserted HTML. That eval will run in the scope of the parent so it uses the parent instance of $.

If you just moved the script to the iframe it will fail because it doesn't have access to $.

于 2013-10-04T15:34:19.323 に答える