Рефакторинг функции, которая использует window.open для использования DOM, а не write ()
У меня есть приложение, которое использует window.open() для создания динамических всплывающих окон. К сожалению, у меня возникли проблемы с созданием содержимого новых окон с использованием стандартных функций DOM (createElement, appendChild), и я перешел на использование document.write() для создания страницы.
Конкретно, как я могу выйти из этого:
function writePopup()
{
var popup = window.open("", "popup", "height=400px, width=400px");
var doc = popup.document;
doc.write("<html>");
doc.write("<head>");
doc.write("<title>Written Popup</title>");
doc.write("</head>");
doc.write("<body>");
doc.write("<p>Testing Write</p>");
doc.write("</body>");
doc.write("</html>");
doc.close();
}
К функции, которая создает такое же всплывающее окно с помощью DOM?
Обновлено: я подумал об использовании абсолютно позиционированного элемента для имитации всплывающего окна, и, хотя он выглядит лучше, пользователи должны иметь возможность распечатать отображаемую информацию.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 6
Почему бы не использовать библиотечную функцию, такую как http://plugins.jquery.com/project/modaldialog, вместо того, чтобы изобретать колесо?
[РЕДАКТОР
function writePopup(){
var popup = window.open("", "_blank", "height=400px, width=400px");
var doc = popup.document;
doc.title = 'Written Popup';
var p = doc.createElement('p');
p.innerHTML = 'Testing Write';
doc.body.appendChild(p);
}
вы мог используете CSS, чтобы скрыть все, кроме всплывающего окна (div) при печати ... новое окно, вероятно, проще, но это все еще возможно без него.
Можно ли было бы иметь другую страницу, которая генерирует динамический контент и открывать ее, передавая аргументы, которые идентифицируют контент, который вы хотите сгенерировать, вместо попытки записи в новое окно?
Просто выполняя быстрые тесты, я могу получить документ для добавления HTML-кода, созданного DOM, в мое всплывающее окно следующим образом:
var popup = window.open("", "popup", "height=400px, width=400px");
var doc = popup.document.documentElement;
var p = document.createElement("p");
p.innerHTML = "blah";
doc.appendChild(p);
В моем примере получается абсолютно недопустимый HTML, который я знаю, но он работает (очевидно, с ограниченным тестированием).
Один дамп .innerHTML должен работать лучше, чем миллион строк document.write ();
Я бы построил DOM по мере необходимости и сбрасывал с помощью
doc.innerHTML = newDOM;
По-прежнему отчасти хакерский, но лучше, чем document.write ();
I've gone to using document.write() to generate the page.
Я думаю, вам, вероятно, придется использовать хотя бы какой-то document.write (), чтобы разместить скелетную страницу, прежде чем вы сможете взаимодействовать с DOM:
doc.write('<!DOCTYPE ...><html><head></head><body></body></html>');
doc.close();
doc.body.appendChild(...);
Перед вызовом write () документ нового окна находится в неопределенном состоянии, еще нет документа, с которым можно было бы взаимодействовать. Firefox, по крайней мере, помещает временный скелетный документ, пока вы не вызовете сначала document.write (), но я не вижу, чтобы это действительно где-то задокументировано, поэтому на него, вероятно, лучше не полагаться.
var popup = window.open("", "popup", "height=400px, width=400px");
В window.open не требуется единица «px».
вы могли бы использовать что-то вроде
function writePopup(){
var htmlString=[
"<html>",
"<head>",
"<title>Written popup</title>",
"</head><body>",
"<p>Testing write</p>",
"</body></html>"
].join("\n");
window.open("data:text/html,"+encodeURIComponent(htmlString), "_blank", "height=400px, width=400px");
}
Пользователи должны иметь возможность распечатать содержимое всплывающего окна, что исключает все, что использует фальшивое всплывающее окно, например этот модуль.