document.write 动态加载脚本答案

【问题标题】：document.write loading scripts dynamically [duplicate]document.write 动态加载脚本
【发布时间】：2014-03-10 21:07:39
【问题描述】：

我正在尝试动态加载脚本。这是我的代码：

document.write('<script type="text/javascript">window.jQuery || document.write(\"<script src=\'http://code.jquery.com/jquery-1.10.2.min.js\'></script>\")</script>');

这是在 B.js 中，它作为脚本加载到 A.html 上。但我得到错误。双引号内的结束脚本标记被视为嵌套脚本标记并破坏代码。

任何想法如何解决这个问题？

【问题讨论】：

是的，不要使用document.write()。改用 DOM 操作。
@Cerbrus 你不能在 DOM 中执行脚本
@YuriyGalanter: "无法将可执行脚本放入 DOM" --> 不能什么？ “跑步”？ “插入”？无论哪种方式，你都不需要。而不是document.write，只需检查jQuery。如果 jQuery 不存在，则使用 DOM 操作来加载脚本。

标签： javascript jquery html

【解决方案1】：

从最里面的嵌套开始分解你的字符串，每次都考虑它会在哪里被解释，以及它需要如何编码。

<script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>

这个 HTML 将在 String 内，转义 quotes 和 反斜杠 并在嵌套中上一层

window.jQuery || document.write("<script src=\'http://code.jquery.com/jquery-1.10.2.min.js\'></script>");

这个脚本将在HTML中，转义标签并在嵌套中上一层

<script type="text/javascript">window.jQuery || document.write("<"+"script src=\'http://code.jquery.com/jquery-1.10.2.min.js\'><"+"/script>");</script>

这个 HTML 将在 String 内，转义 quotes 和 反斜杠 并在嵌套中上一层

document.write('<script type=\"text/javascript\">window.jQuery || document.write(\"<\"+\"script src=\\\'http://code.jquery.com/jquery-1.10.2.min.js\\\'><\"+\"/script>\");</script>');

这将作为外部脚本加载，所以我们完成了。

我选择使用"<"+"tag>..<"+"/tag>" 样式来打断标签，因为我发现它更容易逃脱。

【讨论】：

【解决方案2】：

始终使用 CDN 是一种很好的方法，但有时如果 CDN 出现故障怎么办（虽然这种可能性很少），但您永远不知道在这个世界上任何事情都可能发生。

下面给出的 jQuery 代码检查 jQuery 是否从 Google CDN 加载，如果不是，则它引用您文件夹中的 jQuery.js 文件。

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript">
if (typeof jQuery == 'undefined') 
{
document.write(unescape("%3Cscript src='Scripts/jquery.1.9.1.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>

它首先从 Google CDN 加载 jQuery，然后检查 jQuery 对象。如果 jQuery 没有成功加载，那么它将从硬盘位置引用 jQuery.js 文件。在本例中，jQuery.js 是从 Scripts 文件夹中加载的。

【讨论】：

【解决方案3】：

使用：

var s = document.createElement("script");
s.type = "text/javascript";
s.src = "http://somedomain.com/somescript";
    $("head").append(s);
//or using plain js
    (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(s);

dynamically-load-jquery-library-javascript

【讨论】：

我喜欢你的 vanilla 直到 $("head") xD document.head
“jQuery 以一种特殊的方式处理标签” 不。内部的</script> 标签只是破坏了代码。除此之外，解决方案是正确的。
嗯。我想我没有正确解释那部分。
@PaulS.:jquery 之美..... :D
美丽对我来说是无效的，因为如果你看到我的代码，我想要动态加载 jquery :S

【解决方案4】：

在 JavaScript 字符串文字中将 </ 表示为 <\/。

转义 / 使 JavaScript 解析器的含义保持不变，但对于 HTML 解析器则不同。

由于您的 HTML 包含包含 JavaScript 的 HTML 包含包含 HTML 的 JavaScript (!!!) 您必须对最里面的部分进行双重转义。

我认为这会奏效：

document.write('<script type="text/javascript">window.jQuery || document.write(\"<script src=\'http://code.jquery.com/jquery-1.10.2.min.js\'><\\/script>\")<\/script>');

……但这太可怕了，而且生成一个新的脚本元素只是为了决定是否要生成一个新的脚本元素似乎没有什么意义。你会得到相同的结果：

if (!window.jQuery) {
  document.write("<script src='http://code.jquery.com/jquery-1.10.2.min.js'><\/script>";
}

【讨论】：

我已经试过了。还是不行。
我没有意识到您需要在 JavaScript 中转义 /s。 '\/' === '/'; // true
@PaulS。 — 正如我所解释的，在 JavaScript 中 "</script>" 和 "<\/script>" 是等价的。在 HTML 中，它们是不同的。
@Jack — 哦，该死的，这是嵌套……我会更新答案。
@Quentin：谢谢，但它仍然不起作用。你可以自己试试。 :(