使用 AJAX 加载外部 HTML 文件时忽略 CSS

Question

我正在构建一个网页，我正在使用 javascript function 来获取 HTML 文件并显示它的内容。

http://progress.cat/portfolio.html -> 其中主要的 HTML 是

http://progress.cat/portfolio_js.html -> 从此页面获取 HTML（放置在portfolio.html中）

问题是我的投资组合。html 主要 CSS

http://progress.cat/assets/css/particle_dark.css

http://progress.cat/assets/css/particle_demo.css

正在与我的投资组合_js.html css

http://progress.cat/portfolio_logic/css/freelancer.min.css

我想要的是portfolio_js忽略主要的CSS

它看起来如何

它应该是什么样子

这可能吗？

Function ：

  function includeHTML() {
  var z, i, elmnt, file, xhttp;
  /*loop through a collection of all HTML elements:*/
  z = document.getElementsByTagName("*");
  for (i = 0; i < z.length; i++) {
    elmnt = z[i];
    /*search for elements with a certain atrribute:*/
    file = elmnt.getAttribute("w3-include-html");
    if (file) {
      /*make an HTTP request using the attribute value as the file name:*/
      xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4) {
          if (this.status == 200) {elmnt.innerHTML = this.responseText;}
          if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
          /*remove the attribute, and call this function once more:*/
          elmnt.removeAttribute("w3-include-html");
          includeHTML();
        }
      }
      xhttp.open("GET", file, true);
      xhttp.send();
      /*exit the function:*/
      return;
    }
  }
};

Answer 1

首先，我建议您在服务器端包含这个部分片段，而不是 ajax。 例如，如果您使用 PHP，它会像： <?php include 'some_file.html'; ?> <?php include 'some_file.html'; ?>

但是，如果您要使用 ajax，那么您想要获取的外部文件不应包含任何内容，除了您尝试获取的原始 HTML。 它不应该有任何其他标签。 没有<html> ， <head>等。它需要的任何样式表都应该加载到主页上。

使用 AJAX 加载外部 HTML 文件时忽略 CSS

问题描述

1 个解决方案

解决方案1
0 2019-11-08 16:17:48

使用 AJAX 加载外部 HTML 文件时忽略 CSS

问题描述

1 个解决方案

解决方案1 0 2019-11-08 16:17:48

解决方案1
0 2019-11-08 16:17:48