使用 InnerHTML 加载 html 页面时保持 CSS 样式

Posted 2023-05-07

【中文标题】使用 InnerHTML 加载 html 页面时保持 CSS 样式

【英文标题】：Keeping CSS styling when loading html page using InnerHTML

【发布时间】：2013-05-12 22:23:14

【问题描述】：

使用下面的代码，我可以通过单击菜单中的链接将 html 页面加载到我网站中的 div。

现在，问题是当它将 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>     

【问题讨论】：

听起来iframe 可能是解决这个特定问题的更好方法。

我们能看看req.responseText 的样子吗？

【参考方案1】：

从页面中获取样式元素并将其附加到头部：

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) 块中。

【讨论】：

PitaJ，我在使用它时遇到问题，我应该如何将您的代码与我的代码合并？我需要把它放在我发布的 js 代码中的某个地方吗？

【参考方案2】：

将.innerHTML 更改为.html，或者直接使用.load(req.responseText)

.innerHTML 会覆盖我所相信的一切。你只是想改变一个部分。

【讨论】：

哎呀，这是一个 jQuery 解决方案，没有正确阅读问题。您可能必须将适当的样式添加到加载区域，而不是依赖父文档来设置 AJAX 加载项的样式。