脚本预处理基础答案

【问题标题】：Basics of script pre-processing脚本预处理基础
【发布时间】：2012-07-03 02:51:09
【问题描述】：

我有这个代码：

<script id="toModify" >
Invalid javascript that will cause errors
</script>

<script>
var s=document.getElementById("toModify");
s.innerHTML="alert('Hi')";
</script>

而且它不起作用。

我知道我至少需要做两件事才能让它发挥作用：

防止第一个脚本第一次运行。
修改后，重新运行第一个脚本。

我该如何做这些事情？我还有什么需要做的吗？

【问题讨论】：

你能告诉我们你为什么想要/需要这样做吗？我确信有更好的解决方案来解决您原来的问题。

标签： javascript preprocessor

【解决方案1】：

使用type 属性使浏览器不执行脚本：

<script id="toModify" type="text/x-custom-whatever">...</script>

只需eval() 执行它的代码。

当然，动态生成代码充满危险；小心不要引入安全漏洞。

【讨论】：

@Mageek：这不是一个声明“但eval 是邪恶的”的实例。使用eval 和将字符串插入新创建的<script> 元素之间绝对零差异——除了DOM 方法是tremendously slower。无论哪种方式，您都在执行动态生成的代码。 DOM 插入方法只是在不使用四个字母的关键字的情况下进行。
@Mageek，这取决于你创建基准测试的方式；）如果你缓存引用，那么 DOM 插入比 eval 快..jsperf.com/eval-vs-script-dom-insertion/2
@GabyakaG.Petrioli：不在 Chrome 或 IE 中。
@josh3736，没错！！深入了解浏览器之间的变化...

【解决方案2】：

将类型设置为~~不同于“text/javascript”的脚本~~不支持将使脚本不被处理。

所以<script id="toModify" type="text/unprocessed">...</script>

然后你可以创建一个类型为 script 的新元素，设置它的 innerHTML 并将其附加到文档中..

类似

var s = document.getElementById("toModify");
var processed = document.createElement('script'); // create a new script element

processed.innerHTML = "alert('Hi')"; // or do something with the s.innerHTML
document.body.insertBefore(processed, document.body.firstChild); // add the new element to the body, it gets executed immediately..

http://jsfiddle.net/GG7cT/的演示

【讨论】：

【解决方案3】：

你不能。第一个脚本将始终首先运行。即使它具有defer 属性，我也不确定您是否能够更改其内容。

另见this answer。

【讨论】：

这是不正确的。通过添加无法识别的type 属性，浏览器将忽略<script> 块的内容。然后，您可以稍后获取该块的内容。
当然，但是如果他可以修改他的页面的来源，他会需要那个吗？有他贴的代码，那是不可能的。
一种常见的用法是在<script> 元素中包含HTML 模板语言。您稍后从元素中获取模板源并使用它来呈现数据（通常通过 AJAX 获取）。
是的，我知道这些。我认为 OP 试图通过后续脚本“纠正”页面中已经存在的其他脚本 - 这是不可能的。