jsonp 콜백에서 document.write

Question

스크립트 태그 hack 및 jsonp를 사용하여 상호 도메인 요청을하고 있습니다. 콜백 함수에서 document.write()를 사용하여받은 데이터를 DOM에 씁니다.

doc.write() 대신 appendChild/innerHTML을 사용해야한다는 것을 알고 있습니다. 내 제약 조건은 내가 쓰고 싶은 요소에 클래스/ID 훅이 없다는 것입니다. document.write()를 사용하여 "적절한 위치"에 쓸 수 있습니다.

다음 코드는 스크립트 태그에 HTML의 DIV에 포함되어 있습니다 :

function request_jsonp(){ 
var script = document.createElement('script'); 
var server_path = 'http://somedomain.com/?q=querystring&callback=request_callback'; 
script.setAttribute('src', server_path); 
document.getElementsByTagName('head')[0].appendChild(script); 
console.log('data requested'); 
// document.write('hello world'); // this gets written 
} 


function request_callback(data){ 
    console.log('data received'); 
    document.write(data); 
} 


request_jsonp(); 

window.onload = function(){ 
    console.log('onload fired'); 
} 


/* 
above code prints 

data requested 
data received 
onload fired 
*/ 

는 기본적으로 document.write를 콜백 함수 내에서 정적 문자열로도 작동하지 않습니다. onload 전에 docment.write를 호출하면 페이지에 텍스트가 삽입 된 것으로 간주됩니다. here JavaScript and HTML Script Tags

document.write()가 DOM에 쓰지 못하게하는 원인은 무엇입니까? 또한, 이것을하기위한 더 나은 접근 방법이 있습니까?

Answer 1

document.write();은 암시 적으로 document.open();을 호출하므로 지금까지 문서에서 갖고 있던 모든 내용이 삭제됩니다. 은 document.write();을 사용하여 문서에 콘텐츠를 추가 할 수 없습니다. 그러나 document.write();을 사용하여 전체 문서를 작성할 수 있습니다. @kirilloid가 언급 한 바와 같이, 당신은 GET 매개 변수로 대상 요소를 전달할 수 있습니다

• :

  당신은 몇 가지 가능한 솔루션을 가지고있다.

• 원하는 위치에 IFrame 개체를 삽입하고 myIFrame.document.write();을 사용하여 콘텐츠를 업데이트 할 수 있습니다.

이것은 스크립트 코드의 상위 컨테이너 컨텐트를 업데이트하고 있으므로 아직 닫히지 않았기 때문에 기본적으로 발생합니다.

어느 쪽이든, 또는 나는 완전히 여기에서 궤도를 벗어나 완전히 직면 할 수 있습니다. ;-)