Question

我正在尝试将HTML代码段加载到以下新创建的iframe中。

<!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未正确加载。关于可能导致这种情况的任何想法？

如果我将iFrameContent设置为

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

或

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

页面似乎正确加载。

iframeContent本质上是第三方HTML代码段（使用freemarker js_string进行转义），可能包含HTML注释。

Answer 1

问题是，浏览器知道您的脚本部分已完成的唯一方法是查找“”标记，并且您在脚本中间有一个正确的标记。它认为这是你的javascript的结束，所以当然这是一个语法错误。它也可能会注意到“”标记，并认为你有嵌套脚本。你可以尝试这样的事情：

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

看看是否有效。

更好的方法是使用document.createElement或jQuery库之类的东西来创建DOM元素。

Answer 2

看来，您的代码在IE中工作，但在其他浏览器中却没有。为了使它工作，你需要以某种方式逃脱开始评论的令牌，例如：

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

结束</script\> - 标记在这里不是问题，因为它在代码中不是文字</script>。

将HTML代码段加载到动态创建的iframe中

2 个答案: