使用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样式

回答

相关问题