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

Posted 2023-03-03

【中文标题】添加外部脚本后如何读取源 URL 的响应？

【英文标题】：After adding a external script how to read the response of the URL of the source?

【发布时间】：2018-09-19 07:17:22

【问题描述】：

这里是示例代码。

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

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

【问题讨论】：

了解同源策略。

我知道对于跨域我无法发出 ajax 请求。通过这种方式，我可以发出状态为 200 的请求。

同源策略明确表示您无法阅读响应。

【参考方案1】：

虽然无法获取实际响应，但可以设置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)

【参考方案2】：

唯一的方法是如果从该 url 返回的脚本回叫您。 通常是通过函数名参数来实现的，比如callback。

例如： 您在网站上的图片

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

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

globalCallback("some data");

然后您会收到“一些数据”的警报。 简而言之就是 jsonp。