2015-01-16 4 views
1

저는 JavaScript와 HTML5를 처음 접했고 오늘은 createHTMLDocument()로 놀고 있었고 저는 좌절 한 문제에 처했습니다. Mozilla's site에서 다음 스 니펫을 받았습니다.createHTMLDocument()가 초기화되지 않습니다.

<script> 
    function makeDocument() { 
    var frame = document.getElementById("theFrame"); 

    var doc = document.implementation.createHTMLDocument("New Document"); 
    var p = doc.createElement("p"); 
    p.innerHTML = "This is a new paragraph."; 

    try { 
    doc.body.appendChild(p); 
    } catch(e) { 
    console.log(e); 
    } 

    var destDocument = frame.contentDocument; 
    var srcNode = doc.documentElement; 
    var newNode = destDocument.importNode(srcNode, true); 

    destDocument.replaceChild(newNode, destDocument.documentElement); 
    console.log(destDocument.readyState); 
} 
</script> 
<body> 
    <p>Click <a href="javascript:makeDocument()">here</a> to create a new document and insert it below.</p> 
    <iframe id="theFrame" src="about:blank" /> 
</body> 

예상대로 작동합니다. 텍스트는 문서에 저장되고 예상 readyState "complete"가 콘솔에 기록됩니다.

그러나 makeDocument는, 부하에 자동으로 실행과 같이 그래서 나는 코드를 rejiggered ". 초기화되지 않은"

<div> 
    <iframe id="frame" src="about:blank"> </iframe> 
</div> 

<script> 
    function makeDocument() { 
    var frame = document.getElementById("frame"); 

    var doc = document.implementation.createHTMLDocument("New Document"); 
    var p = doc.createElement("p"); 
    p.innerHTML = "This is a new paragraph."; 

    try { 
     doc.body.appendChild(p); 
    } catch(e) { 
     console.log(e); 
    } 

    var destDocument = frame.contentDocument; 
    var srcNode = doc.documentElement; 
    var newNode = destDocument.importNode(srcNode, true); 

    destDocument.replaceChild(newNode, destDocument.documentElement); 
    console.log(destDocument.readyState); 
    } 

    makeDocument(); 
</script> 

그러나이 실행될 때 텍스트가 문서와 문서의 readyState가이 추가되지 않습니다 나는 어리석은 실수를하고 있다고 확신한다. 어떤 아이디어?

답변

1

DOM을 조작하는 javascript 함수를 호출하려면 onload 이벤트 처리기를 사용해야합니다.

시도

<body onload="makeDocument()"> 

를 추가하는 대신 스크립트 태그에 직접 함수를 호출.

브라우저는 멀티 스레드이므로 스크립트 태그가 iframe 정의 뒤에 있더라도 DOM로드가 보장되지 않습니다.

+1

그래, 그랬어. 감사. 나는 아직도 혼란 스럽지만. 나는 또한 [spec] (https://developer.mozilla.org/en-US/docs/Web/) 이후로 작동해야하는 것처럼 보이지만 (window.onload = makeDocument();) 시도했다. API/GlobalEventHandlers.onload)는 모든 객체가 DOM에 있고 다른 모든 리소스가로드 된 후에 만 ​​window.onload가 시작된다는 것을 알려줍니다. –

+0

주말에 다시 연락을 받아서 며칠을 보니 죄송합니다. 이유는 window.onload = makeDocument(); 명령문이 실패하는 이유는 괄호를 넣음으로써 Javascript가 바로 함수를 호출 한 다음 반환 값을 onload에 할당하도록하기 때문입니다. 당신이 정말로하고 싶은 것은 onload에 함수 자체를 할당하는 것이며, 이벤트가 발생하면 함수는 다음과 같이 호출됩니다. window.onload = makeDocument; 내 대답을 수락 해 주셔서 감사합니다. 기회가 생기면 그것을 upvote하십시오! – lukevp

+0

돌아와 줘서 고마워. 그 문제를 다루는 두 번째 질문을했고 다른 사람이 대답했습니다. 돌이켜 보면 완전히 명백하다. –

관련 문제