使用InnerHTML加載html頁面時保持CSS樣式

使用下面的代碼，我可以通過單擊我的菜單中的鏈接，將HTML頁面加載到我的網站中的div。使用InnerHTML加載html頁面時保持CSS樣式

現在，問題是，當它將HTML頁面加載到div中時，它加載得很好...但沒有它的原始背景顏色，也應該與HTML頁面的其他內容一起加載。所有其他的CSS元素似乎都很好。

謝謝您的高級。

JS代碼：

function processAjax(url) 
{ 
    if (window.XMLHttpRequest) { // Non-IE browsers 
     req = new XMLHttpRequest(); 
     req.onreadystatechange = targetDiv; 
     try { 
      req.open("GET", url, true); 
     } 
     catch (e) { 
      alert(e); 
     } 
     req.send(null); 
    } else if (window.ActiveXObject) { // IE 
      req = new ActiveXObject("Microsoft.XMLHTTP"); 
      if (req) { 
       req.onreadystatechange = targetDiv; 
       req.open("GET", url, true); 
       req.send(); 

    } 
} 
return false; 
} 

function targetDiv() { 
    if (req.readyState == 4) { // Complete 
      if (req.status == 200) { // OK response 
       document.getElementById("containerDiv").innerHTML = req.responseText; 
      } else { 
      alert("Problem: " + req.statusText); 
      } 
    } 
}

HTML：

<a onclick="return processAjax(this.href)" href="example.html">CLICK ME</a> 
<div id="containerDiv"></div>

來源

2013-05-17 shmnsw

聽起來像['iframe']（https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe）可能是解決這個特定問題的更好方法。 –

我們可以看看'req.responseText'看起來像什麼嗎？ –

從頁面獲取的風格元素，並將其追加到頭：

var styles = document.getElementsByTagName('style'); 
var head = document.getElementsByTagName('head')[0]; 

for(var x = 0; x < styles.length; x++){ 
    head.appendChild(styles[x]); 
}

編輯：

您要設置返回的HTML作爲一個元素第一：

var div = document.createElement('div'); 
div.innerHTML = req.responseText; 
var styles = div.getElementsByTagName('style'); 
for(var x = 0; x<styles.length;x++){ 
    document.getElementsByTagName('head')[0].appendChild(styles[x]); 
}

使用新代碼，而不是舊代碼，並將其放入if(reg.status == 200)區塊。

來源

2013-05-17 17:01:51 PitaJ

PitaJ，我有使用它的問題，我應該如何合併你的代碼與我的？我需要把它放在我發佈的js代碼中的某個地方嗎？ – shmnsw

@ user2350095 - 請參閱編輯。 – PitaJ

變化.innerHTML到.html，或只是使用.load(req.responseText)

.innerHTML覆蓋一切，我相信。你只是想改變一個部分。

來源

2013-05-17 16:58:33

哎呀，這是一個jQuery解決方案，沒有正確閱讀問題。您可能需要將相應的樣式添加到加載區域，而不是依賴父文檔來設置AJAX加載項目的樣式。 –

使用InnerHTML加載html頁面時保持CSS樣式

回答

相關問題