如果你想在 Promise 中获取 script 标签的内容并保留它(例如动态加载的脚本),可以使用以下方法:
 

方法 1:直接返回 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);
});

方法 2:获取 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); // 字符串形式的脚本代码
    }
});

方法 3:通过 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);
  });

注意事项

  1. 跨域问题:如果是通过 fetch 获取脚本,需确保目标服务器允许跨域(CORS 配置)。

  2. 动态脚本执行:直接插入 script 标签会立即执行脚本,而 fetch 获取的文本内容可以自由控制执行时机。

  3. 保留 script 引用:如果需要后续操作(如移除脚本),建议返回 script DOM 元素。