javascript - 如何将 html 代码块分配给 javascript 变量(以调用 javascript 调用)

Question

我想将一段 html 代码分配给一个 js 变量

html代码是

<script>alert('test');</script>

我想做这个

var script = "<script>alert('test');</script>";

document.getElementById('test').innerHTML = script;

但是不起作用

如果我用标签(或任何其他标签)替换标签，那么它就可以工作。

var script = "<span>alert('test');</span>";

我试过了

var script = "<script>alert('test');</script>";
eval(script);

和

eval ("<span>alert('test');</span>");

但它们都有语法错误。

这可能与脚本标签内有脚本标签有关

<script> <script> </script> </script>

有办法解决这个问题吗？

TIA

Answer 1

您不能注入(inject) <script>元素使用 .innerHTML并期望它进行评估。您必须使用 eval或document.write或注入(inject)<script>以“正常”方式进入 DOM。使用动态脚本，eval推荐。

请记住eval评估纯 JavaScript 并且不使用 HTML 解释器。 (将此与 PHP 的默认行为进行对比，其中 eval 就像将 ?>$string<?php 插入到文档中。)

还请记住，脚本在接近 </script> 时终止。 。插入 </script> 很奇怪无论如何，都应将其写入 JavaScript(除非您使用 document.write 方法，该方法有很多问题，在大小不是极端问题的情况下应避免)。

这是使用 eval 的示例:

var script = 'alert("test");';
eval(script);

如果要将脚本与其他元素一起注入(inject)到 DOM 中，则需要提取<script>注入(inject)后的元素并执行(内部或外部)脚本。像 jQuery 和 Prototype 这样的框架会自动执行此操作，这也是推荐它们而不是普通 JavaScript 的众多原因之一。