如果你想在 Promise
中获取 script
标签的内容并保留它(例如动态加载的脚本),可以使用以下方法:
script
元素如果你是通过 document.createElement('script')
动态创建的 script
标签,可以直接返回该元素:
function loadScript(url) {
return new Promise((resolve, reject) => {
const script = document.createElement('script');
script.src = url;
script.onload = () => resolve(script); // 返回 script 元素
script.onerror = reject;
document.head.appendChild(script);
});
}
// 使用示例
loadScript('https://example.com/script.js')
.then(script => {
console.log('Script loaded:', script); // script 是 DOM 元素
// 可以继续操作 script
})
.catch(err => {
console.error('Failed to load script:', err);
});
script
的内容(如果是内联脚本)如果是内联脚本(<script>...</script>
),可以用 .textContent
或 .innerHTML
获取内容:
function getInlineScriptContent(scriptId) {
return new Promise((resolve) => {
const script = document.getElementById(scriptId);
if (script) {
resolve(script.textContent); // 返回脚本内容
} else {
resolve(null);
}
});
}
// 使用示例
getInlineScriptContent('myScript')
.then(content => {
if (content) {
console.log('Script content:', content); // 字符串形式的脚本代码
}
});
fetch
获取脚本内容如果你想通过 fetch
获取脚本的文本内容(但不执行):
function fetchScriptContent(url) {
return fetch(url)
.then(response => {
if (!response.ok) throw new Error('Network error');
return response.text(); // 返回脚本的文本内容
});
}
// 使用示例
fetchScriptContent('https://example.com/script.js')
.then(content => {
console.log('Script content:', content); // 纯文本的脚本代码
// 可以动态创建 script 标签并插入
const script = document.createElement('script');
script.textContent = content;
document.head.appendChild(script);
})
.catch(err => {
console.error('Failed to fetch script:', err);
});
跨域问题:如果是通过 fetch
获取脚本,需确保目标服务器允许跨域(CORS 配置)。
动态脚本执行:直接插入 script
标签会立即执行脚本,而 fetch
获取的文本内容可以自由控制执行时机。
保留 script
引用:如果需要后续操作(如移除脚本),建议返回 script
DOM 元素。