无框架JavaScript中如何跳转页面后动态添加脚本？

问题 #

我目前正在学习无框架的JavaScript，想请教如何跳转至另一个HTML文件后，为其动态添加脚本？

目前我的实现代码如下：

onClick()
{
    window.location = newpage.html;
    var script = createElement('script');
     script.src = dynamic + 'script.js';
    var body = document.findbyID('body');
     body.appendChild(src);
}

其中一个动态脚本示例如下：

function addText()
{
    var text = createElement('p');
    text.innerhtml = sometext;
    var textHolder = findbyid('div_somewhere_in_html');
    body.appendChild(text);
}

上述代码无法在新页面中显示文本，window.location命令可以正常跳转，但动态添加的文本不会出现在新页面中。若执行console.log(window.location)，仅显示localhost:3000。

补充说明：所有文件均为本地托管。

解决方案 #

你的代码核心问题是：执行window.location = newpage.html后，当前页面会立即启动卸载流程，后续创建脚本、添加DOM的代码根本不会被执行——浏览器已经切换到新页面的加载逻辑了。

下面提供两种可行的实现方案，附带原代码的错误修正：

方案一：修改目标页面（newpage.html）实现动态加载 #

这是最稳定的方案，适合能直接修改目标页面的场景：

1. 跳转时通过URL传递标识参数，告知目标页面需要加载动态脚本：

function onClick() {
  // 给目标页面添加参数标记
  window.location = 'newpage.html?loadDynamicScript=1';
}

2. 在newpage.html的底部添加如下代码，监听页面加载完成后执行逻辑：

<script>
window.addEventListener('load', function() {
  // 解析URL中的参数
  const params = new URLSearchParams(window.location.search);
  if (params.get('loadDynamicScript')) {
    // 创建脚本元素
    const script = document.createElement('script');
    // 替换dynamic为你的实际路径前缀，比如'/assets/'
    script.src = `${dynamic}script.js`;
    // 脚本加载完成后执行addText
    script.onload = function() {
      addText();
    };
    document.body.appendChild(script);
  }
});

// 修正原脚本的语法错误
function addText() {
  const text = document.createElement('p');
  text.innerHTML = 'sometext'; // 字符串需加引号，或提前定义sometext变量
  const textHolder = document.getElementById('div_somewhere_in_html');
  // 将文本添加到指定容器，而非body
  textHolder.appendChild(text);
}
</script>

方案二：通过新窗口注入脚本（非跨域场景适用） #

如果无法修改目标页面，可以用window.open打开新窗口，等待其加载完成后注入脚本（本地localhost托管无跨域问题）：

function onClick() {
  const newWindow = window.open('newpage.html');
  // 监听新窗口的加载完成事件
  newWindow.addEventListener('load', function() {
    const script = newWindow.document.createElement('script');
    script.src = `${dynamic}script.js`;
    script.onload = function() {
      newWindow.addText();
    };
    newWindow.document.body.appendChild(script);
  });
}

原代码的语法错误修正 #

即使逻辑正确，以下错误也会导致代码失效：

• 所有DOM操作方法需加document.前缀：createElement → document.createElement，findbyID/findbyid → document.getElementById
• 属性名需遵循驼峰写法：innerhtml → innerHTML
• 变量名错误：body.appendChild(src) 中的src应为script
• 字符串需加引号：window.location = newpage.html → window.location = 'newpage.html'，sometext需改为字符串或提前定义变量

内容的提问来源于stack exchange，提问作者German III Felisarta