4

iframe に読み込まれた html ドキュメントがあります。
そのドキュメントの JavaScript でいくつかのポップアップ メニュー コードを開発し、メイン ドキュメントから iframe にコードを挿入します。

しかし、私のコードは " document" オブジェクトを使用し、驚くべきことに iframe ドキュメントではなくメイン ドキュメントを参照しているため、iframe では機能しません。

また、コンテンツの選択をいじっwindow.getSelection()ていますが、メインのドキュメントの選択に戻る必要があり、window.frames[0].getSelection()代わりに必要です。

私は間違っていますか？
これを克服する簡単な解決策はありますか？

更新: (明確化)
Bergi が指摘したように、私の質問は、注入された JavaScript コードを正しく実行して、iframe のグローバル スコープではなくローカル スコープを取得する方法についてです。
だから私はコード内の とを書き換える 必要はありません...documentwindow

更新: (私の html のスケルトン)

<html>
  <head></head> <!-- script launches on jquery's $(document).ready -->
  <body>
    <iframe>
    [
      <body>
        ...
        <script></script> <!-- code injected here from the code (appended to the body) -->
      </body>
    ]
    </iframe>
  </body>
</html>

スクリプトは次のようになります (jquery を使用):

$(function(){
$('iframe').load(function(){

var $doc = $('iframe').contents();
var $head = $('head', $doc);
$head.append('<link rel="stylesheet" href="/stylesheets/book-popup-menu.css" />');

var $body = $('body', $doc);
$body.append(' \
    <div id="popup"> \
    </div> \
');
$body.append(' \
    <script type="text/javascript"> \
              console.log(document.body);// it still displays the global body \
            </script> \
');
});
});

更新:問題を示すフィドル

4

1 に答える 1