動的に作成されたiframeにHTMLスニペットを読み込む

新しく作成したiframeに次のようにHTMLスニペットを読み込もうとしています。動的に作成されたiframeにHTMLスニペットを読み込む

<!DOCTYPE html> 
<html> 
<head><title>Test</title></head> 
<body> 
<script type="text/javascript"> 
    var iframeId = "frame" 
      + Math.floor((Math.random() + "") * 1000000000000).toString(); 

    document.write('<iframe height="300"' 
     + ' width="300"' 
     + ' frameborder="0"' 
     + ' scrolling="no"' 
     + ' id="' + iframeId + '"' 
     + ' name="' + iframeId + '"' 
     + ' allowtransparency="true"></iframe>'); 

    var iframe = document.getElementById(iframeId); 
    var iframeContent = '<!-- --\><script language=\"javascript\"\></script\>'; 
    iframe.contentWindow.document.open(); 

    iframe.contentWindow.document.write(
     '<!DOCTYPE html\><html\><head\><title\>Test</title\></head\><body\>' 
     + iframeContent 
     + '</body\></html\>'); 

    iframe.contentWindow.document.close(); 
</script> 
</body> 
</html>

この文書をブラウザで開くと、iframeが正しく読み込まれません。これを引き起こしている可能性のあることについての考えはありますか？私は

var iframeContent = '<!-- --\>';

または

var iframeContent = '<script language=\"javascript\"\></script\>';

としてiFrameContentを設定した場合

ページが正しくロードするように思えます。

iframeContentは基本的にサードパーティのHTMLスニペット（freemarker js_stringを使用してエスケープされています）であり、HTMLコメントを含むことがあります。

出典

2012-05-11 Vijeth Dinesha

連結するときに.toString（）を呼び出す必要はありません。 Javascriptは自動的にそれを行います。 – SomeKittens

問題は、ブラウザでスクリプトセクションが完了したことを知る唯一の方法は、 ""タグを探すことで、スクリプトの途中でそれらのいずれかを取得することです。それはあなたのJavaScriptの終わりだと思うので、もちろんそれは構文エラーです。また、 ""タグに気付き、ネストされたスクリプトがあると思います。あなたは次のようなものを試すことができます：

var iframeContent = '<!-- --\><' + 
    'script language=\"javascript\"\></' + 'script\>';

それが動作するかどうかを確認してください。

さらに、document.createElementやjQueryライブラリのようなものを使用してDOM要素を作成することもできます。

出典

2012-05-11 20:45:26

あなたのコードはIEでは動作していますが、他のブラウザでは動作していないようです。それが仕事を得るために、あなたがコメントを開始トークンエスケープする必要があります何とか、例えば：それはコード内のリテラル</script>はないので</script\> -tagを終了

var iframeContent = '<!\-- --\><script language=\"javascript\"\></script\>';

は、ここでの問題ではありません。

出典

2012-05-11 21:00:16 Teemu

動的に作成されたiframeにHTMLスニペットを読み込む

答えて

関連する問題