web-dev-qa-db-ja.com

JavaScript関数をIframeに挿入します

このリンク （ アーカイブバージョン ）は、スクリプトからコードをiframeに挿入する方法を説明しています。

_function injectJS() {
  var iFrameHead = window.frames["myiframe"].document.getElementsByTagName("head")[0];
  var myscript = document.createElement('script');
  myscript.type = 'text/javascript';
  myscript.src = 'myscript.js'; // replace this with your SCRIPT
  iFrameHead.appendChild(myscript);
}
_

それは大丈夫ですが、関数オブジェクトをiframeに挿入してiframeコンテキストで実行したい場合はどうすればいいですか？私が持っているとしましょう：

_function foo () {
    console.log ("Look at me, executed inside an iframe!", window);
}
_

fooのコードをiframe内に挿入したいですか？ （関数fooは動的にロードされるものである可能性があり、引用符で囲むことはできません）

私は素朴に試しました：

var scriptFooString = "<script>" + foo.toString() + "</script>"

関数内のコードを取得しますが、

  • Iframeに挿入する方法がわかりませんHEAD（おそらくjqueryで？）
  • 正しいかどうかはわかりません
  • 関数がそれよりもはるかに複雑な場合はどうなるかわかりません
  • scriptFooStringの二重引用符と単一引用符で何が起こるかわかりません

ヒントはありますか？

domiframeheadjavascript
30
janesconference

まず、フレームとそれを表示するページが同じドメイン内にある場合にのみ、これを達成できます（クロスドメインルールのため）

次に、JSを介してフレームのdomおよびwindowオブジェクトを直接操作できます。

frames[0].window.foo = function(){
   console.log ("Look at me, executed inside an iframe!", window);
}

dOMElementオブジェクトからフレームを取得するには、次を使用できます。

var myFrame = document.getElementById('myFrame');

myFrame.contentWindow.foo = function(){
       console.log ("Look at me, executed inside an iframe!");
}

Fooのスコープは変更されないため、windowはfoo内の親ウィンドウなどのままです。

他のフレームのコンテキストで実行する必要があるコードを挿入する場合は、スクリプトタグを挿入するか、評価することができます。

frames[0].window.eval('function foo(){ console.log("Im in a frame",window); }');

一般的なコンセンサスはevalを使用しないことですが、本当にこれを達成する必要がある場合は、DOMインジェクションよりも優れた代替手段だと思います。

あなたの特定のケースでは、次のようなことができます：

frames[0].window.eval(foo.toString());
32
EJTH

これが私の解決策です。私はjqueryを使用してコンテンツを挿入し、evalを使用してそのiframeのコンテキストでスクリプトタグを実行しています：

    var content = $($.parseHTML(source, document, true));
    $("#content").contents().find("html").html(content);
    var cw = document.getElementById("content").contentWindow;
    [].forEach.call(cw.document.querySelectorAll("script"), function (el, idx) {
        cw.eval(el.textContent);
    });
2
frumbert