20

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

コード：

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

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

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

4

8 に答える 8

26

問題は、スクリプトにスクリプト終了タグ ( ) が含まれている場合に HTML パーサーが混乱し</script>、スクリプト タグを途中で閉じてしまうことです。

/解決策は、 inをエスケープすることです"<\/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>、コード ( jsfiddle )に文字列が含まれていないため機能します。

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

または ( jsfiddle ):

var scriptTag = "<script>alert(1)<"+"/script>";
$("#iframe").contents().find("body").append(scriptTag);
于 2013-08-22T00:33:05.540 に答える
5 
var script = "alert('hello world');";
$('#iframe').contents().find('body').append($('<script>').html(script))

フィドルで動作します

于 2013-08-22T00:17:32.520 に答える
2

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

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

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

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

于 2013-09-01T04:15:18.333 に答える
1

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

eval の使用

function initFrame (code){

    eval (code);

}

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

評価なし

var initFrame = new Function(js_code);


initFrame.apply ($('#iframe').contents(),[]);
于 2013-08-22T00:36:16.743 に答える
-2

ファイル/セッションなどに保存されているデータを取得するために、js interval 関数で ajax refresh を設定するのはどうですか?

これは確かに最も軽量なモードではなく、ごくわずかな php が含まれますが、作業を行うことができます。

于 2013-09-01T14:16:20.020 に答える