Есть ли способ исправить вложенный document.write в window.open?

У меня есть кнопка, которая откроет новое пустое окно с помощью window.open, но напишет в нем таблицу умножения.

Вот мой код.

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.

Вместо этого происходит то, что таблица умножения печатается в исходном окне, а в новом всплывающем окне появляется неопределенное сообщение. Это имеет смысл, опять же из-за вложенных document.writes.

Два вопроса:

  1. Как исправить это вложенное document.write и заставить его работать?
  2. Есть ли способ назначить идентификатор новому окну с помощью window.open?

Кроме того, я смотрю на этот пост SO: document.write, вложенный в document.write, но единственным ответом было просто не использовать document.write.

Заранее спасибо.


javascript new-window window.open document.write
person FruDe    schedule 17.07.2020    source источник
comment
Ответ IS просто не использовать document.write.   -  person mplungjan    schedule 17.07.2020
comment
Я сделал тебе фрагмент. Мне пришлось добавить " после </button>, но есть и другие вещи.   -  person mplungjan    schedule 17.07.2020

Ответы (1)


arrow_upward
0
arrow_downward

Помимо НЕ ИСПОЛЬЗОВАТЬ 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>");
  }
}

не документировать, а возвращать html

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>

person mplungjan    schedule 17.07.2020