Question

我正在学习前端开发并构建了我自己的JS Bin版本。单击“运行”按钮后，将执行此语句以在iframe（输出窗口）中显示html，css和js：

＆＃xA;＆＃xA;

 （“iframe” ）.contents（）发现（ “HTML”）HTML（。 “＆LT;风格＆gt;” 中+ $（ “＃cssCode”）。VAL（）+ “＆LT; /风格＆gt;” 中+ $（ “＃htmlCode”）。 VAL（）+ “＆LT;脚本＆gt;” 中。+ $（ “＃jsCode”）VAL（）+ “＆LT; /脚本＆gt;” 中）;＆＃XA;

＆＃XA;＆＃ xA; 我知道你不能将这个语句添加到这个.html（）函数中 - 它不会执行js。但是我不明白为什么。有谁知道吗？＆＃xA;

Answer 1

要正确理解此错误，请考虑以下代码：

<body>
  <script>
    var html = 'The script tag will ended with </script>';
    document.body.innerHTML = html
  </script>
</body>

渲染引擎将开始解析HTML文档并将元素转换为名为 content tree 的树中的DOM节点;结果如下：

<body>
  <script>var html = 'The script tag will ended with</script>
  '; document.body.innerHTML = html
</body>

在这种情况下，当JavaScript引擎开始执行此代码时，它返回SyntaxError: unterminated string literal。因为字符串文字必须用单(')或双(")引号括起来。

那么，解决方案是什么？

快速解决方案是使用"<"代替"<"。如下面的代码：

<script>
  var html = 'The script tag will ended with &lt;/script>';
  document.body.innerHTML = html
</script>

如何执行用“.innerHTML”插入的“script”元素？

在下面的示例中，我们希望将带有innerHTML函数的jQuery库放在文档中并执行它：

var html = '&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">&lt;/script>',
    el = document.getElementById( 'test' );

el.innerHTML = html;

var str = el.innerHTML.split(/"/)[1],
    tag = document.createElement( 'script' );

tag.src = str;
document.getElementsByTagName( 'head' )[ 0 ].appendChild( tag )

<button onclick="$('#test').html('The script inserted and loaded.')">Execute</button>
<div id="test"></div>

为什么<script>不能直接添加到.html（）函数中？

1 个答案:

那么，解决方案是什么？

如何执行用“.innerHTML”插入的“script”元素？