动态创建script标签实现跨域资源访问是一种常见的前端技巧，可以用于向其他域名的服务器请求数据。以下是实现该方法的具体步骤：
1. 创建一个 script 标签
在 HTML 中动态添加一个 script 标签，并设置其中的 src 属性为需要访问的资源的 URL。例如：
<script src="http://example.com/data.js"></script>
2. 创建一个回调函数
当该资源被加载完成后，网页会自动执行该资源中包含的 JavaScript 代码。而我们通常会在该代码中调用回调函数，将获取的数据传递给该函数，并在该函数中对数据做进一步处理。例如：
<script src="http://example.com/data.js"></script>
<script>
function handleData(data) {
// 处理接收到的数据
}
</script>
3. 跨域问题
使用动态创建 script 标签请求外部数据时，会遇到跨域问题，因为浏览器会禁止跨域操作。为了解决该问题，可以在资源 URL 末尾添加一个回调函数名，服务器会将数据作为参数传递给该回调函数。例如：
<script src="http://example.com/data.js?callback=handleData"></script>
<script>
function handleData(data) {
// 处理接收到的数据
}
</script>
服务器返回的 JavaScript 代码将会包含一个调用 handleData 函数的语句，例如：
handleData({ foo: 'bar' });
示例一
以下实例演示了动态创建 script 标签请求 GitHub API 并在回调函数中处理接收到的数据：
<!DOCTYPE html>
<html>
<head>
<title>GitHub API Example</title>
</head>
<body>
<script>
function handleData(data) {
console.log('Repositories:', data);
// 处理接收到的数据
}
const script = document.createElement('script');
script.src = 'https://api.github.com/orgs/github/repos?callback=handleData';
document.body.appendChild(script);
</script>
</body>
</html>
示例二
以下实例演示了使用 jQuery 实现动态创建 script 标签请求百度翻译 API 并在回调函数中处理接收到的数据：
<!DOCTYPE html>
<html>
<head>
<title>Baidu Translate API Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<script>
function handleData(data) {
console.log('Translation:', data.trans_result[0].dst);
// 处理接收到的数据
}
$.ajax({
url: 'https://fanyi.baidu.com/transapi?from=auto&to=en&query=你好',
dataType: 'jsonp',
jsonp: 'callback',
success: handleData,
});
</script>
</body>
</html>
以上是动态创建 script 标签实现跨域资源访问的方法介绍及示例说明。需要注意的是，该方法虽然可以解决跨域问题，但也存在一些安全问题，因此在使用时需要慎重考虑。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：动态创建script标签实现跨域资源访问的方法介绍 - Python技术站
微信扫一扫 
支付宝扫一扫 