Рефакторинг функции, которая использует window.open для использования DOM, а не write () - PullRequest
Новая
       15

Рефакторинг функции, которая использует window.open для использования DOM, а не write ()

2 голосов
/ 05 ноября 2008

У меня есть приложение, которое использует 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?

Редактировать: я рассматривал возможность использования абсолютно позиционированного элемента для имитации всплывающего окна, и, хотя он выглядит лучше, пользователи должны иметь возможность печатать отображаемую информацию.

Ответы [ 6 ]

2 голосов
/ 12 февраля 2009

Я перешел к использованию document.write () для генерации страницы.

Я думаю, что вам, вероятно, придется использовать хотя бы какой-нибудь 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");

Нет необходимости в единице «px» в window.open.

2 голосов
/ 05 ноября 2008

Один дамп .innerHTML должен работать лучше, чем миллион строк document.write ();

Я бы собрал DOM по мере необходимости и добавил бы 

doc.innerHTML = newDOM;

Все еще довольно хакерский, но лучше, чем document.write ();

2 голосов
/ 05 ноября 2008

Просто проводя быстрые тесты, я могу получить документ для добавления 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, который я знаю, но он работает (очевидно, с ограниченным тестированием).

1 голос
/ 05 ноября 2008

Почему бы не использовать библиотечную функцию, например 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);
}
0 голосов
/ 25 октября 2010

вы можете использовать что-то вроде 

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");
}
0 голосов
/ 05 ноября 2008

Возможно ли иметь другую страницу, которая генерирует динамический контент, и открывать ее, передавая аргументы, которые идентифицируют контент, который вы хотите сгенерировать, вместо попытки записи в новое окно?

...