时间戳

首页 > 解决方案 > 加载外部js文件，修改里面的东西然后正常执行

javascript - 加载外部js文件，修改里面的东西然后正常执行

问题描述

我想 1）通过 js 代码以编程方式加载一个外部 js 文件，2）替换其中的一些文字值，只有 3）正常执行它。

即，而不是这一步

<script async src="https://external_domain1.com/script1.js"></script>

我想做一些事情 3 个步骤：

<script>
  // incomplete solution
  var script = document.createElement('script');
  script.src = "https://external_domain1.com/script1.js";
  script.async = true;
  document.head.appendChild(script); // must not be executed at this point yet
  //?????
</script>

怎么做？

标签： javascript

解决方案

使用 fetch/XMLHttpRequest 下载脚本，然后修改响应中的文本，然后将其添加为 inlilne 脚本

fetch("https://external_domain1.com/script1.js")
.then(response => response.text())
.then(text => {
  const s = text.replace('foo', 'bar');
  script.textContent = s;
  const script = document.createElement('script');
  document.body.appendChild(script);
});

这里不需要 async 标志，只需将其附加到document.body

选择

在您的服务器上有一些资源，访问时会执行以下操作

  • 读https://external_domain1.com/script1.js
  • 修改内容
  • 将修改后的内容作为响应发送

让我们假设这个脚本是用 PHP 编写的，存在于文件夹中/path-to-script并被调用magicScript.php- 然后在 HTML 中你只需要

<script async src="/path-to-script/magicScript.php">

推荐阅读