javascript обнуляет при установке document.body.innerHTML - PullRequest
Новая
       0

javascript обнуляет при установке document.body.innerHTML

2 голосов
/ 20 февраля 2012

Добрый день.

В настоящее время я работаю над проектом, который печатает на принтере желаемое <div>.

Вот код: 

    var printContents = document.getElementById(id).innerHTML;
    var originalContents = document.body.innerHTML;

    document.body.innerHTML = printContents;
    document.body.style.display = "none";

    window.print();

    document.body.innerHTML = originalContents;
    document.body.style.display = "block";

Этот код работает и печатает требуемый <div>, но после этого мне нужно снова вернуться на предыдущую страницу, поэтому я использовал это утверждение: 

document.body.innerHTML = originalContents;
document.body.style.display = "block";

Это отображает предыдущую страницу, но функциональные возможности мои кнопки ушли ?!Может кто-нибудь объяснить мне, что случилось, и есть ли решение этой проблемы?Заранее спасибо!

Ответы [ 4 ]

5 голосов
/ 20 февраля 2012

Это происходит из-за того, что вы стерли старый DOM, к которому были подключены события, и заменили его совершенно новым, другим DOM, который, как оказалось, имеет тот же HTML.

Предположительно, вывыбираем этот подход, потому что зона печати определяется во время выполнения.Менее разрушительным решением может быть создание нового <iframe> и копирование в него нужной разметки;затем вызовите print() в iframe.Что-то вроде: 

var printElement = function(element) {
    var frame = document.createElement('iframe');
    document.appendChild(frame);
    frame.contentDocument.innerHTML = element.innerHTML;
    frame.contentWindow.print();
    document.removeChild(frame);
};

Вам также необходимо скопировать любые ссылки CSS в <iframe>.

(обратите внимание, что это псевдокод, а не проверено)

0 голосов
/ 20 февраля 2012

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

`*{display:none}
.printableDiv{display:block}`

для определения файла печати css используйте этот код: <link rel="stylesheet" type="text/css" href="print.css" media="print"> (что Рафаэль сказал вам). удачи

0 голосов
/ 20 февраля 2012

Когда вы сбрасываете innerHTML, вы не получаете все свои обработчики событий обратно.Они стираются, когда вы создаете совершенно новые элементы DOM.

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

<body>
    <div id="mainContent">main screen content goes here</div>
    <div id="printContent">generated print content goes here</div>
</body>

// hide main content
var mainDiv = document.getElementById("mainContent");
mainDiv.style.display = "none";
// put content to print in the print div and show it
var printDiv = document.getElementById("printContent");
printDiv.innerHTML = document.getElementById(id).innerHTML;
printDiv.style.display = "block";

// print
window.print();

// restore visibility
mainDiv.style.display = "block";
printDiv.style.display = "none;

Вы также можете просто использовать все тело для печати и использовать таблицу стилей с media="print" для управления видимостью вещейВы не хотите печатать.

0 голосов
/ 20 февраля 2012

Ваш код очищает документ и затем возвращает HTML, сохраненный в originalContents, но эта переменная хранит только строку, поэтому все ранее зарегистрированные обработчики событий исчезают.

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

<link rel="stylesheet" type="text/css" href="print.css" media="print">
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...