添加外部脚本后如何读取源的URL的响应？

Question

这是示例代码。

var s=document.createElement("script");
s.src="http://example.com";
document.body.appendChild(s);

执行最后一行后会有一个get请求。响应将是200，我如何阅读此请求的响应。

Answer 1

唯一的方法是，从该URL返回的脚本会回拨您。通常它是通过函数名参数实现的，例如回调。

例如：您网站上的图片

window.globalCallback = (data) => alert(data)

如果GET http://example.com?callback=globalCallback返回了一个javascript文件，例如：

globalCallback("some data");

然后你会收到警告的“一些数据”。简而言之，这就是jsonp。

Answer 2

虽然您无法获得实际的响应，但您可以设置s.onerror和s.onload以确定它是否成功加载。

function importScript (sSrc, fOnload) {
    var oScript = document.createElement("script");
    oScript.type = "text\/javascript";
    oScript.onerror = loadError;
    if (fOnload) { oScript.onload = fOnload; }
    document.currentScript.parentNode.insertBefore(oScript, document.currentScript);
    oScript.src = sSrc;
}

function loadError (oError) {
  alert("The script " + oError.target.src + " is not accessible.");
}

importScript("https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js", function() { alert("It Worked"); });
importScript("https://example.com/broken.js", function() { alert("It Worked"); });

如果你确实需要得到实际的响应，你可能需要设置一个代理，以便你可以点击类似https://your-own-server.com/getJsonFrom?src=http://example.com，然后你可以让你的服务器做请求，然后你正在读取你自己的服务器的响应。

或者，如果您可以控制其他服务器，则可以将其返回，而不是

{ some: "data" }

它会返回

callback({ some:  "data" });

然后你可以定义callback做任何你想做的事情：

function callback(data) {
    console.log(data)
}