本文介绍在使用 window.open() 创建新标签页并动态写入含图片的 iframe 时，正确设置 document.title 的方法，解决因文档未就绪导致标题失效的问题。
本文介绍在使用 `window.open()` 创建新标签页并动态写入含图片的 iframe 时，正确设置 `document.title` 的方法，解决因文档未就绪导致标题失效的问题。
在 JavaScript 中，通过 window.open() 打开一个空白新标签页后，若立即操作其 document（如设置 title 或调用 document.write()），往往失败——这是因为新窗口的文档对象尚未完成初始化，DOM 处于未就绪状态。尤其当后续需写入 <iframe></iframe> 加载远程图片时，更需确保文档环境已稳定。
正确的做法是等待新窗口加载就绪后再执行 DOM 操作。虽然新窗口初始为空白（about:blank），但其 load 事件仍会被触发（注意：此处非指 iframe 的 load，而是窗口自身的 document 加载完成）。因此，应将 document.title 设置与 document.write() 均置于 onload 回调中：
var customTab = window.open();
if (customTab && !customTab.closed) {
customTab.onload = function() {
// ✅ 此时 document 已就绪，可安全操作
customTab.document.title = 'My new tab';
customTab.document.write(
'<!DOCTYPE html>' +
'<html><head><title>My new tab</title></head>' +
'<body style="margin:0;">' +
'<iframe src="' + myImage + '" style="width:100%;height:100vh;border:none;"></iframe>' +
'</body></html>'
);
customTab.document.close(); // ⚠️ 关键：关闭 document 流，确保内容渲染
};
} else {
console.warn('Failed to open new tab — popup blocked or browser restriction.');
}⚠️ 重要注意事项：
- 必须调用
customTab.document.close()，否则页面可能处于“加载中”状态，导致标题不生效或 iframe 渲染异常； - 建议为写入内容添加完整 HTML 结构（
、<code>、等），避免浏览器进入怪异模式（Quirks Mode），影响样式与行为； -
myImage需为合法 URL（建议提前校验）；若图片跨域，iframe 可能受限于同源策略，但标题设置不受影响； - 现代浏览器普遍拦截非用户手势触发的
window.open()，请确保该逻辑由点击等用户交互事件触发，否则customTab可能为null。
综上，核心原则是：所有对新窗口 document 的写入与修改，必须延迟至其 load 事件之后，并以 document.close() 显式结束写入流程。 这一模式不仅适用于设置标题，也适用于注入 CSS、脚本或任何动态内容。
