如何替换HTML头部的document.write()并按顺序加载依赖JS文件？

需求背景 #

需要替换HTML文件<head>中的document.write()方法，根据Cookie中存储的语言变量myLocale（如en_US）插入对应的file1_{myLocale}.js，且该文件必须在file2.js、file3.js、file4.js之前加载——后三者依赖前者提供的函数。

当前代码结构 #

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<head>
<script language="javascript">
  document.write( '<scr' + 'ipt src="/file1_'+myLocale+'.js"  type="text/javascript"></scr' + 'ipt>' );
</script>

<script src="/file2.js" type="text/javascript"></script>
<script src="/file3.js" type="text/javascript"></script>
<script src="/file4.js" type="text/javascript"></script>
…
</head>

尝试过的无效代码 #

<script>
    var script = document.createElement("script");
    var scriptSrc = '<scr' + 'ipt src="/file1_'+myLocale+'.js"';
    script.setAttribute("src", scriptSrc);
    script.setAttribute("async", "false");
    var head = document.head;
   head.insertBefore(script, head.firstChild);
</script>

解决方案 #

先明确你之前代码的核心错误 #

你错误地将整个<script>标签的字符串作为src属性值传入，正确的src应该直接是脚本文件的URL，不需要包含<script>标签的内容。

以下是两种可行的实现方式：

方案1：兼容旧浏览器的同步加载法 #

这种方法和document.write的行为完全一致——阻塞页面解析直到脚本加载并执行完成，确保后续脚本执行时依赖已存在：

// 先从Cookie中获取myLocale（如果尚未获取）
function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
}
const myLocale = getCookie('myLocale') || 'en_US'; // 设置默认语言

// 同步加载目标脚本
const xhr = new XMLHttpRequest();
xhr.open('GET', `/file1_${myLocale}.js`, false); // 第三个参数为false表示同步请求
xhr.onload = function() {
  const script = document.createElement('script');
  script.textContent = xhr.responseText;
  // 将脚本插入到head最前面，确保优先执行
  document.head.insertBefore(script, document.head.firstChild);
};
xhr.send();

方案2：HTML5兼容的同步动态脚本插入法 #

针对支持HTML5的浏览器，通过设置async=false强制脚本按顺序同步加载，同时插入到file2.js之前，保证加载顺序：

// 获取myLocale的逻辑同上
function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
}
const myLocale = getCookie('myLocale') || 'en_US';

const script = document.createElement('script');
script.src = `/file1_${myLocale}.js`;
script.type = 'text/javascript';
script.async = false; // 关键：强制脚本按插入顺序同步加载

// 找到file2.js的脚本标签，插入到它前面
const file2Script = document.querySelector('script[src="/file2.js"]');
if (file2Script) {
  file2Script.parentNode.insertBefore(script, file2Script);
} else {
  document.head.appendChild(script);
}

内容的提问来源于stack exchange，提问作者Jim