AngularJS/JS中能否用window.open打开TestPage1并替换其保存的HTML内容

完全可以通过window.open实现该需求，只要两个页面符合同源策略（同协议、同域名、同端口），就能直接操作新打开页面的DOM完成内容替换。

核心实现逻辑 #

• 首先在TestPage2的记录点击事件中获取对应保存的HTML内容，打开TestPage1并留存新窗口的实例引用
• 监听新窗口的加载完成事件，再对TestPage1的DOM做内容替换，示例代码如下：

// TestPage2 点击记录的触发逻辑
document.querySelectorAll('.record-row').forEach(row => {
  row.addEventListener('click', async () => {
    // 示例：从当前行的自定义属性取预存的HTML内容，也可根据行ID异步调用接口拉取
    const targetHtml = row.dataset.storedHtml;
    // 打开TestPage1，拿到窗口实例
    const page1Window = window.open('TestPage1.HTML', '_blank');
    // 等待TestPage1加载完成后再操作DOM，避免报错
    page1Window.addEventListener('load', () => {
      // 替换整页内容就修改body的innerHTML，也可指定替换TestPage1内某个容器的内容
      page1Window.document.body.innerHTML = targetHtml;
      // 若原有UI-Grid、按钮等组件有绑定事件，此处可重新执行TestPage1的组件初始化逻辑
    });
  })
})

注意事项 #

• 直接替换innerHTML会清空原有DOM上绑定的事件，建议你将组件的初始化逻辑单独封装在TestPage1的全局方法里，替换内容后手动调用该方法完成UI-Grid渲染、事件重新绑定等操作。
• 如果两个页面存在跨域情况，浏览器会禁止直接操作新窗口的DOM，此时可改用URL传参方案：打开TestPage1时将记录ID拼接在URL后（如TestPage1.HTML?recordId=xxx），TestPage1加载时主动读取URL参数、请求接口拉取对应HTML内容后自行替换，兼容性更强。

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