有没有办法修复 window.open 中嵌套的 document.write？

Question

我有一个按钮，可以使用 window.open 打开一个新空白 window，但会在上面写一个乘法 table。

这是我的代码。

document.getElementById("p").innerHTML = "<button id = 'mult' type = 'button'>Multiplication Tables</button>";
document.getElementById("mult").onclick = function() {
  newWindow()
};
document.getElementById("close").onclick = function() {
  close()
};

function newWindow() {
  var multiplyWindow = window.open("", "multiplicationTables", "width = 300, height = 200");
  multiplyWindow.document.write(multiply());
}

function multiply() {
  document.write("<center><table border='1px'>");
  for (var a = 5; a < 11; a++) {
    document.write("<tr style='height:40px'>");
    for (var b = 5; b < 11; b++) {
      document.write("<td style='width:40px'><center><font size='4'>" + a * b + "</center></font></td>");
    }
    document.write("</tr>");
  }
}

<p id="p"></p>

我知道问题是因为当我运行 multiply() 函数时，我们嵌套了一个 document.write。我想过使用 document.getElementById，但问题是（我认为）没有使用 window.open.

打开的新 window 的 ID

相反，乘法 table 打印在原始 window 上，并且在新的弹出窗口 window 中显示“未定义”消息。这是有道理的，同样是因为嵌套的 document.writes.

两个问题：

如何修复这个嵌套的 document.write 并让它继续工作？
有没有办法使用 window.open 将 ID 分配给新的 window？

此外，我查看了这个 SO post: document.write nested in document.write，但唯一的答案就是不使用 document.write.

提前致谢。

Answer 1

除了不要使用 DOCUMENT.WRITE

你不能“筑巢”

改变

function multiply() {
  document.write("<center><table border='1px'>");
  for (var a = 5; a < 11; a++) {
    document.write("<tr style='height:40px'>");
    for (var b = 5; b < 11; b++) {
      document.write("<td style='width:40px'><center><font size='4'>" + a * b + "</center></font></td>");
    }
    document.write("</tr></table>");
  }
}

不是document.write而是returnhtml

function multiply() {
  const html = []
  html.push("<center><table border='1px'>");
  for (var a = 5; a < 11; a++) {
    html.push("<tr style='height:40px'>");
    for (var b = 5; b < 11; b++) {
      html.push("<td style='width:40px'><center><font size='4'>" + a * b + "</center></font></td>");
    }
    html.push("</tr>");
  }
  return html.join("")
}


function newWindow() {
  const multiplyWindow = window.open("", "multiplicationTables", "width=300,height=200");
  if (multiplyWindow) {
    multiplyWindow.document.write(multiply());
    multiplyWindow.document.close(); // important
  }  
  else alert("sorry, popups are blocked");
}

const p = document.getElementById("p");
p.innerHTML = "<button class='mult' type='button'>Multiplication Tables</button>";
p.addEventListener("click",function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("mult")) newWindow()
})

<p id="p"></p>

有没有办法修复 window.open 中嵌套的 document.write？

Is there a way to fix nested document.write in window.open?

javascript

document.write

new-window

window.open