2011-08-22 4 views
0

와 페이지 소스를 렌더링하기 :내가 다음과 같이이 개 파일을 다음 한 자바 스크립트

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
</head> 
<script> 
function init(){ 
document.getElementById("mytest").innerHTML= "Results after rendering..."; 
} 

</script> 
<body onload="init();"><div id="mytest">OK</div> 
</body> 
</html> 

두 번째 페이지는 일반적으로 경고 팝업을 첫 페이지의 모든 소스 코드를 제공합니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
</head> 
<script> 
xmlhttp.open("GET", "test.html",true); 
xmlhttp.onreadystatechange=function() { 
    if (xmlhttp.readyState==4) { 
    alert(xmlhttp.responseText) 
    } 
} 
xmlhttp.send(null) 
</script> 
<body> 
</body> 
</html> 

내가 원하는 것은 렌더링 후 소스 코드 만 얻고 싶습니다. 모든 원본 코드를 가져 오는 대신 렌더링 후 모든 코드를 어떻게 얻을 수 있습니까? 그래서 < div id = "mytest"> 렌더링 후 결과를 읽을 수 있습니다. </div> XMLHTTP로 시도 할 때. 이미 페이지 용으로 렌더링 된 코드를 얻는 방법을 어떻게 할 수 있습니까? 고전 Javascript 또는 DOM 만 사용하고 싶습니다. Jquery, JSON, Mootool을 사용하지 않으려 고합니다. 미리 감사드립니다. 잘 모르겠어요

+1

수 없습니다. 첫 번째 변경 사항은 실제 HTML 파일이 아니라 DOM에 대한 변경 사항입니다. 따라서 HTML 파일에 대한 이후의 요청은 렌더링 된 버전이 아니라 원본 HTML을 얻습니다. 구체적으로 무엇을하려고합니까? 어쩌면 다른/더 좋은 방법이있을 것입니다. –

+0

JavaScript를 통해 렌더링되는 웹 페이지에서 특정 내용을 가져오고 싶습니다. 그래서 HTML 및 JavaScript의 소스 코드를 가져 오는 대신 렌더링 페이지 코드를 얻는 방법을 생각하고 있습니다. –

답변

2

아약스로 페이지를로드하는 대신 브라우저의 iframe 지원을 활용하십시오.

변경 이런 식으로 HTML 소스를 경고 두 번째 파일 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
</head> 

<script> 
function displayAlert() 
{ 
    alert(document.getElementById('iframe').contentDocument.body.innerHTML); 
} 
</script> 
<body onload="displayAlert()"> 
<iframe src="test.html" id="iframe" style="display:none;"></iframe> 
</body> 
</html> 

이 보이지 않는 iframe에 test.html를로드됩니다. 브라우저가 iframe 내에 test.html을 자동으로 렌더링하고 완료되면 displayAlert()을 호출합니다. displayAlert()은 iframe 내부의 소스 코드를 가져 와서 경고합니다. 그러나이 솔루션은 test.html같은 서버에있는 경우에만 작동합니다. test.html이 완전히 다른 서버에있는 경우 iframe에 대한 액세스 권한이 거부되므로이 솔루션이 작동하지 않습니다. 이 경우이를 우회 할 다른 솔루션을 알려 드릴 수 있습니다.

+0

정말 작동합니다. 감사 –

0

나는 당신이 정말로 요구하는지 알고 있지만 왜 그냥하지 :

alert(document.body.innerHTML); 

로드시 스크립트에 의해 수행 된 모든 변경 사항으로 실제 렌더링 몸 HTML을 얻을 수 있습니다.

참고 : 브라우저가 innerHTML을 다른 구문 분석 된 데이터 폼에서 다시 구성하기 때문에 innerHTML의 수정되지 않은 부분이 항상 원래 소스 HTML과 정확하게 비교되지는 않으므로 속성에 동일한 인용 부호가 없거나 같은 순서로있을 수 있습니다 대문자 사용은 동일하지 않을 수 있습니다.

+0

첫 페이지가 제 3 자 사이트에 있고, 전혀 수정할 수 없으며 해당 페이지에 내용을 렌더링하는 자바 스크립트가 있으므로 두 번째 페이지를 코딩하여 소스 코드를 얻습니다. 실제 소스 코드 만 가져옵니다. , 비록 그것의 렌더링 버전. Chrome에서 테스트 중이므로 Chrome에서만 사용하도록하고 싶습니다. 지금 다른 브라우저가 호환 될 필요는 없습니다. –

+0

렌더링 된 HTML은 브라우저 DOM 내에 만 존재합니다. 그것은 당신이 그것을 얻을 수있는 유일한 장소입니다. 그래서, 어떻게 든 그것을 브라우저에로드하고 브라우저 창에서 innerHTML을 가져와야합니다. – jfriend00

+0

' ' 위의 코드로 브라우저에로드하는 데 지치지 만, 그런 식으로 작동하지 않습니다. 코딩에 문제가 있다고 생각합니다. –

관련 문제