Question

我正在从另一个需要在其后立即运行脚本的Web服务中动态加载窗口小部件。该示例使用document.write（）来执行此操作，但这不起作用，因为它在文档关闭之后才会运行，这意味着它会覆盖整个文档。我正在尝试使用纯JavaScript通过AJAX加载它：

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) { // success
    eval(this.responseText);
  }
};
xhttp.open("GET", "https://d3gxy7nm8y4yjr.cloudfront.net/js/embed.js", true);
xhttp.setRequestHeader('Content-type', 'application/javascript');
xhttp.send();

但是我收到以下错误：

XMLHttpRequest无法加载 https://d3gxy7nm8y4yjr.cloudfront.net/js/embed.js。没有＆＃39;访问控制允许来源＆＃39;标题出现在请求的上资源。起源＆＃39; https://example.com＆＃39;因此是不允许的访问。

我能够使用此代码在我的测试服务器上使用jQuery使其工作：

$.ajax({
    dataType: "script",
    cache: true,
    url: "https://d3gxy7nm8y4yjr.cloudfront.net/js/embed.js"
});

但是，我不能在我的生产服务器上使用jQuery，因为......好吧......工作政治。

jQuery如何在没有错误的情况下完成此任务，我怎样才能在纯JavaScript中完成？

解决方案

如@shabs所述，$.ajax会向document.head添加脚本标记，然后立即将其删除。我通过添加断点检查了这一点，并在Chrome的检查员中看到它已添加和删除。无论文件是什么，它都会在当前脚本完成后立即删除该文件。这适用于立即调用的脚本，但我不知道这对于像库这样的东西是如何工作的。

对于纯JavaScript实现，我使用了以下代码：

var widgetScript = document.createElement("script");
widgetScript.async = true;
widgetScript.src = "https://d3gxy7nm8y4yjr.cloudfront.net/js/embed.js";
document.head.append(widgetScript);
widgetScript.remove();

Answer 1

在没有jQuery的情况下通过AJAX加载JavaScript文件

解决方案

1 个答案: