求助：JS创建页面展示父窗口代码及父页向window.open子页传数据异常

一、先解决需求二：修复子页面标题和内容不显示的问题 #

你遇到的问题主要有两个核心原因：

• 你在document.write里使用了HTML转义字符（<、>），这会让浏览器把这些标签当成普通文本解析，而不是构建HTML结构，所以子页面无法正确识别标题和段落标签，自然显示默认的“Untitled”。
• 如果你想展示<p id="idHere">saas</p>里的文本内容saas，那你用.id获取的是元素的id属性值（也就是idHere），而不是元素内的实际文本，这也是内容显示不对的关键。

修复后的完整代码 #

<p id="titleHere">ProvaText</p>
<p id="idHere">saas</p>
<input type="button" id="btnNew" onclick="newWindow();" value="test">

<script>
function newWindow(){ 
  var nuovaFin = window.open(""); 
  // 获取父页面标题元素的文本内容
  var title = opener.document.getElementById("titleHere").innerText; 
  // 获取目标元素内的文本内容（如果要取id属性值，保留.id即可）
  var idContent = opener.document.getElementById("idHere").innerText; 

  // 直接写入原始HTML标签，不需要转义，用模板字符串更清晰
  nuovaFin.document.write(`
    <html>
      <title>${title}</title>
      <body>
        <p>${idContent}</p>
      </body>
    </html>
  `);
  // 写完后关闭文档流，确保页面稳定渲染
  nuovaFin.document.close();
}; 
</script>

额外提示 #

• 模板字符串（`）能避免字符串拼接的混乱，让HTML结构更易读。
• 注意同源限制：如果父页面和子页面跨域，opener会无法访问父页面元素，所以测试时要确保在同一域名/端口下。

二、需求一：通过JS创建页面展示父窗口中的部分代码 #

要实现这个需求，核心是获取父窗口中需要展示的代码内容，转义后以纯文本形式在子页面展示（避免浏览器把代码解析成HTML），用<pre>标签可以保留代码的换行和缩进格式。

实现示例 #

假设父页面有一段需要展示的代码在<pre id="codeToShow">标签内：

<pre id="codeToShow">
function calculateSum(a, b) {
  return a + b;
}
console.log(calculateSum(2, 3));
</pre>
<input type="button" onclick="showCodeWindow()" value="展示父窗口代码">

<script>
function showCodeWindow() {
  var codeWin = window.open("");
  // 获取父页面的代码内容
  var codeContent = opener.document.getElementById("codeToShow").innerText;
  // 转义HTML特殊字符，防止代码被浏览器解析
  var escapedCode = codeContent.replace(/</g, "&lt;").replace(/>/g, "&gt;");
  
  codeWin.document.write(`
    <html>
      <title>父窗口代码展示</title>
      <body>
        <h3>父窗口中的代码片段：</h3>
        <pre>${escapedCode}</pre>
      </body>
    </html>
  `);
  codeWin.document.close();
}
</script>

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