2011-02-11 2 views
0

다음은 Ajax 요청에 대한 코드 스 니펫입니다. 요청은 작동하지만 요청이 처리되면 페이지가 CSS없이 표시됩니다 (동일한 디렉토리에 모든 항목이 있더라도). 이를 테스트하기 위해 요청이 이미 존재했던 사이트의 페이지를 가리 키도록했습니다. 어떤 도움이 필요합니까? 미리 감사드립니다. Ajax를 통해 페이지에서 CSS를 주입Ajax 요청이 작동하지만 CSS가없는 경우

<html> 
<head> 
<script type="text/javascript"> 
function loadXMLDoc() 
{ 
var xmlhttp; 
if (window.XMLHttpRequest) 
    { 
    xmlhttp=new XMLHttpRequest(); 
    } 
else 
    { 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
xmlhttp.onreadystatechange=function() 
    { 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText; 
    } 
    } 
xmlhttp.open("GET","ajaxtest.html",true); 
xmlhttp.send(); 
} 
</script> 
</head> 
<body> 
<div id="myDiv"><h2>Let AJAX change this text</h2></div> 
<button type="button" onclick="loadXMLDoc()">Change Content</button> 
</body> 
</html> 
+0

'ajaxtest.html'이 (가) CSS 파일을로드하고 있습니까? –

+0

더 많은 코드를 추가 할 수 있습니까? 당신이 myDiv에 가지고있는 것과 같은 것? 또한, 당신은 무엇을 뒤로 돌리고 있습니까? –

+0

예, 요청한 페이지가 이미 내 페이지에 있고 Ajax 요청을 통해 보지 않으면 모든 CSS가 있습니다. – dzi

답변

1

모든 브라우저에서 지원되지 않습니다 (인라인 여부 또는 <link> 태그를 통해).

해결책은 Ajax 호출이 포함 된 페이지에서 Ajax 컨텐츠 용 CSS를로드하는 것입니다.

0

W3 Schools에 따르면 스타일 시트의 <link> 요소는 문서 <head>에만 나타날 수 있습니다.

<div> 내 외부 파일 (해당 스타일을 링크하는 파일)의 내용을 포함하면로드되지 않습니다.

0

H2 태그를 innerHTML으로 덮어 쓰는 것이 문제입니다. 뭔가가 있다면

<h2 id="myDiv">Let AJAX change this text</h2> 

h2를 유지합니다. 또는 당신은 AJAX가 다시 전달이 필요합니다 :

<h2>What I want to change it to</h2> 
0
당신이 아약스로 요청하는 pege 내부 < 스타일 > 요소 내부에 CSS를 이동

. 트릭을해야 할 것입니다.

두 번째 방법은 아약스로 요청한 페이지에 대한 CSS를 요청한 마녀의 페이지에있는 CSS 파일에 삽입하는 것입니다.

관련 문제