document.body.innerHTML을 설정할 때 javascript가 무효화됩니다.

안녕하세요.document.body.innerHTML을 설정할 때 javascript가 무효화됩니다.

현재 프린터에 원하는 <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";

을 이것은 이전 페이지를 표시하지만 내 버튼의 기능은입니다. 누군가가 내게 어떤 일이 일어 났는지 설명 할 수 있습니까? 그리고이 문제에 대한 해결책이 있습니까? 미리 감사드립니다!

출처

2012-02-20 Oneb

이벤트가 발생했던 이전 DOM을 지우고 동일한 HTML을 사용하는 완전히 새로운 DOM으로 바꿔서 이런 일이 일어나고 있습니다.

아마도 인쇄 가능한 영역이 런타임에 결정되기 때문에이 방법을 사용하고있을 것입니다. 덜 파괴적인 해결책은 새로운 을 생성하고 원하는 마크 업을 복사하는 것입니다. iframe에서 print()을 호출하십시오. 예 :

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

으로 CSS 참조를 복사해야합니다.

출처

2012-02-20 06:39:24

오, 그래서 그렇게되었습니다. 하나의 질문, 어떻게로드 할 수 또는 아마도 옛 dom을 유지할 수 있습니까? 제 상황을 해결할 수있는 방법을 제안 해 주시겠습니까? 대단히 감사합니다 !!! – Oneb

귀하의 코드가 문서를 삭제 한 후 originalContents에 저장된 HTML을 다시 박았지만, (주이 의사 코드와 이 테스트하지 않습니다)이 변수 만 저장하는 문자열, 그래서 이전에 등록 된 이벤트 핸들러 떠났다.

인쇄 스타일 시트를 만들고 인쇄하려는 콘텐츠를 제외한 모든 것을 숨기지 않는 이유는 무엇입니까?

<link rel="stylesheet" type="text/css" href="print.css" media="print">

출처

2012-02-20 06:44:40 Rafael

innerHTML을 재설정하면 모든 이벤트 핸들러가 다시 반환되지 않습니다. 그들은 완전히 새로운 DOM 요소를 만들 때 지워집니다.

하나의 아이디어는 몸에 두 개의 마스터 div가있는 것입니다. 하나는 정상적인 디스플레이이고 다른 하나는 인쇄하려는 것입니다. 당신은 다음과 같이 표시하지 않으려 중 하나 숨길 수 :

이

<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"와 스타일 시트를 사용할 수 있습니다 당신은/돈을 인쇄하고 싶지 않습니다.

출처

2012-02-20 06:46:43 jfriend00

페이지 내 모든 다이빙에 클릭 이벤트를 추가하여 사용자가 div를 클릭 할 수 있습니다. 그 후에 클래스가 인쇄 CSS 파일 내에서 정의 된 해당 div에 추가됩니다.

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

가 인쇄 CSS 파일이 코드를 사용하여 정의 : CSS를 인쇄 파일 내부 는 다음 코드를 사용 <link rel="stylesheet" type="text/css" href="print.css" media="print"> (라파엘은 당신에게있다한다). 행운을 빌어 요.

출처

2012-02-20 08:09:09

document.body.innerHTML을 설정할 때 javascript가 무효화됩니다.

답변

관련 문제