点击按钮打开新窗口后，无法同时设置title与写入内容

嘿，我之前也碰到过一模一样的问题！其实核心原因是新窗口的DOM还没完全初始化的时候，你就尝试去修改它的属性或者写入内容，导致操作没生效。下面给你两种靠谱的解决方案，你可以根据需求选：

方法一：通过document.write一次性写入完整HTML结构 #

这种方法最直接，打开新窗口后直接写入包含title标签的完整HTML代码，标题和内容会一起生效：

$(document).ready(function(){
  $("button").click(function(){
    var newWindow = window.open('', '_blank', 'width=600,height=400');
    // 直接写入包含title的完整HTML结构
    newWindow.document.write(`
      <!DOCTYPE html>
      <html>
      <head>
        <title>自定义窗口标题</title>
        <meta charset="UTF-8">
      </head>
      <body>
        <h1>新窗口的内容标题</h1>
        <p>这里可以写入任意你需要的文本、标签或数据</p>
      </body>
      </html>
    `);
    newWindow.document.close(); // 必须调用close，确保内容渲染完成
  });
});

方法二：等待新窗口加载完成后再操作 #

如果你不想一次性写完整HTML，可以等新窗口的load事件触发后再修改属性和写入内容，这样能确保DOM已经准备就绪：

$(document).ready(function(){
  $("button").click(function(){
    var newWindow = window.open('', '_blank', 'width=600,height=400');
    
    // 监听新窗口的load事件，确保DOM初始化完成
    newWindow.addEventListener('load', function() {
      // 设置窗口标题
      newWindow.document.title = '自定义窗口标题';
      // 写入内容（也可以用appendChild等其他DOM操作）
      newWindow.document.body.innerHTML = '<h1>动态添加的内容</h1><p>这是通过innerHTML写入的数据</p>';
    });
  });
});

关键注意事项 #

• 确保新窗口是同源的：如果是打开外部域名的窗口，浏览器的同源策略会直接阻止你修改它的内容和标题。
• 弹窗拦截：有些浏览器会拦截非用户主动触发的window.open，你把操作放在按钮点击事件里的做法是对的，能最大程度避免被拦截。

你可以试试上面的方法，应该能完美解决你的问题！

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