如何在HTML5中正确调用动态加载JS文件内的自定义title()函数

• 执行时序不匹配：你在HTML头部内联脚本中调用title("Framework")时，head.js还未被加载。main.js中绑定了DOMContentLoaded事件才会动态插入head.js，而DOMContentLoaded是整个DOM树解析完成后才会触发的事件，早于该节点执行的内联脚本自然找不到未加载的title函数。
• 冗余逻辑说明：当前title函数的逻辑存在多余操作，直接给document.title赋值本身就会修改页面标题，不需要额外创建title元素插入DOM，该操作不影响运行但没有实际意义。

方案1：调整脚本加载顺序（无特殊需求优先选） #

直接取消动态加载逻辑，在调用title函数之前静态引入head.js即可，修改HTML的head部分代码：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 先加载head.js，再执行函数调用 -->
    <script src="javascript/head.js"></script>
    <script> title("Framework"); </script>
</head>

该方案逻辑最简洁，不需要保留main.js的动态加载代码。

方案2：保留动态加载逻辑，等脚本加载完成后再调用 #

如果必须要做动态脚本加载，可以监听head.js的加载完成事件，把函数调用放到回调中执行：

1. 修改main.js代码：

"use strict";

document.addEventListener("DOMContentLoaded", function() {
    let newScript = document.createElement("script");
    newScript.src = "javascript/head.js";
    // 监听脚本加载完成事件
    newScript.onload = function() {
        // 加载完成后再调用title函数
        title("Framework");
    }
    let heads = document.getElementsByTagName("head")[0];
    heads.prepend(newScript);
});

2. 删除HTML头部的内联调用代码<script> title("Framework"); </script>即可。

方案3：自定义事件解耦（多模块调用场景适用） #

如果页面多个模块都需要调用title函数，可以用自定义事件做逻辑解耦：

1. HTML内联脚本中监听加载完成通知：

<script>
document.addEventListener('headJsLoaded', function() {
    title("Framework");
});
</script>

2. 在main.js的脚本加载回调中触发自定义事件：

newScript.onload = function() {
    document.dispatchEvent(new CustomEvent('headJsLoaded'));
}

可以删除冗余的DOM操作逻辑，优化后代码如下：

function title(titleName) {
    document.title = titleName;
}

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