web-dev-qa-db-ja.com

jQueryを使用して既存のiFrameにJavaScriptコードを追加する方法は？

JQueryを使用して、ページ内の既存のiFrameにJavaScriptスニペットを追加します。私は次のコードを持っています...

コード：

content = "<script>" + js_code + "</script>";

$('#iframe_id').contents().find('body').append(content);

しかし、どういうわけかこれは機能していません。既存の/関連する回答のいくつかを確認しましたが、jQueryはスクリプトタグを... scriptタグとして認識しないようです。 iFrameは同じドメイン/同じポート/同じホストにあるため、クロスサイトスクリプティングなどの問題はありません。これを修正するにはどうすればよいですか？

javascriptjqueryhtmlcssiframe
13
Gandalf

問題は、スクリプトに終了スクリプトタグ（</script>）が含まれており、スクリプトタグが途中で閉じると、HTMLパーサーが混乱することです。

解決策は、/内の"<\/script>"をエスケープすることです。 JavaScriptの文字列（および他のいくつかの言語）、無効な エスケープシーケンス は無視されるため、これは機能します。したがって、"\l"は"l"、および"\/"として扱われます。 "/"として扱われます。ただし、HTMLパーサーはそれらをエスケープするためにバックスラッシュを使用しないため、混乱することはありません（ https://stackoverflow.com/users/405681/keaukraine ）.

var scriptTag = "<script>alert(1)<\/script>";
$("#iframe").contents().find("body").append(scriptTag);

元の解法

HTMLパーサーを台無しにしないように、その終了タグを分割します。このページの他のソリューションは、コードに文字列</script>が含まれないため機能します

var scriptTag = "<script>alert(1)<";
scriptTag +=  "/script>";
console.log(scriptTag);
$("#iframe").contents().find("body").append(scriptTag);

http://jsfiddle.net/ALpjZ/2/

19
Juan Mendes
function putScriptInIframes(script, scriptId) {

   var $iframes = $('iframe');
   $iframes.each(function () {
        var thisDoc = this.contentWindow.document;
        if ( ! thisDoc.getElementById(scriptID)) {
            var scriptObj = thisDoc.createElement("script");
            scriptObj.type = "text/javascript";
            scriptObj.id = scriptId;
            scriptObj.innerHTML = script;
            thisDoc.body.appendChild(scriptObj);
        }
    });
}

これは私がそれを機能させる最も簡単な方法でした。

4
Dan B
var script = "alert('hello world');";
$('#iframe').contents().find('body').append($('<script>').html(script))

Fiddle で動作します

4
Neil S

/scriptをエスケープする必要があります。現れる。

たとえば、Googleアナリティクスを気に入ってもらうには

 $("#iframe").contents().find("body").append(decodeURI("**%3Cscript%3E** alert(2)  **%3C/script%3E**"));

scriptと/scriptをこのエスケープされたものに置き換えます

それが役に立てば幸い。

3
Bruno Braga

Iframeは独自のwindowとして実行されるため、jquery.jsファイルのインポートも注入する必要があります。

<script type="text/javascript" src="/jquery/jquery-ui-1.9.1.custom.js"></script>

EDIT：だから私はこれでもう少し遊んで、ここに私が思いついたものがあります。

[〜＃〜] html [〜＃〜]

<iframe id="frame"></iframe>

[〜＃〜] js [〜＃〜]

$("#frame").attr(
   "src", "data:text/html;charset=utf-8," + 
   "<html>" + 
   "<style>.red {color: red}</style>" + 
   "<div class=\"test\">Test</test>" + 
   "<script src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js\"><" + "/script>" +    
   "<script>$(function(){ $(\".test\").addClass(\"red\")});<" + "/script>" +         
   "</html>"
);

これは動作します。ここを参照してください http://jsfiddle.net/WsCxj/ 。

そのため、いくつかのポイントがあります。

  1. コンテンツ全体を1つの文字列として渡します。 data:text/html;charset=utf-8,を追加する必要があります。その後、iframeのsrcとして文字列を設定できます。

  2. 私はjquery.jsファイルに絶対パスを追加しています-これは重要なようです。おそらく、コンテンツは動的に生成されるため、フレーム自体にはパスがありません。

  3. 少なくともfirefoxはこの時点で実際のスクリプトを終了しようとするため、この<" + "/script>のようにスクリプト終了タグを分割します。よりクリーンなアプローチは、おそらくjsを完全に独立したファイルにすることでしょう。

2
ced-b

JavaScriptを実行するためにタグスクリプトを追加する必要はありません。関数を実行してiframeコンテキストを適用できます...

evalを使用して

function initFrame (code){

    eval (code);

}

initFrame.apply ($('#iframe').contents(),[js_code]);

評価なし

var initFrame = new Function(js_code);


initFrame.apply ($('#iframe').contents(),[]);
1
Luan Castro

私はあなたの最後の投稿にコメントすることができません。私はここにいるので、十分な評判がありませんが、私の投稿で言ったように、問題は/ scriptにありました。

したがって、それをエスケープすることは（たとえばgoogleのように）おそらく最良のオプションです...

まあ、良いニュースは問題が解決したことです;）

よろしく

0
Bruno Braga