在页面中包含 html 文件而不应用原始页面 CSS/JS答案

【问题标题】：Include html file in page without applying original pages CSS/JS在页面中包含 html 文件而不应用原始页面 CSS/JS
【发布时间】：2015-10-17 04:33:17
【问题描述】：

首先我是新来的，如果这个问题看起来写得不好，请原谅我。

有没有办法在不应用原始引用的 CSS/JS 的情况下包含单独的 html 文件？

例如，我有一个文件“index.php”，其中包含对外部样式表的多个引用。

<!-- Bootstrap Core CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">

<!-- Custom Fonts -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" type="text/css">

然后我包含另一个文件 navbar.html 及其自己的外部样式表引用。

<link href="navbar.css" rel="stylesheet">

但是，原始文件的 CSS 和 JS 似乎总是适用于包含的文件，不幸的是，这经常导致包含的页面样式不合适。

有没有办法在只应用所需的 CSS 和 JS 的同时包含页面？

虽然我发现 IFrame 很有用，但我正在寻找一种不使用它们的解决方案，因为它们并不总是与浏览器兼容，并且不会动态改变形状。例如，如果导航栏有一个下拉链接，则不会显示它，因为 iframe 具有设定的大小。

【问题讨论】：

你想要什么不清楚。您想在 index.html 中包含 navbar.html。前面还不清楚外部库。
另外，如果你能把你的两个文件放在这里，那么帮助你会很容易。
我正在寻找的是一种包含navbar.html的方法，而不应用index.html中引用的CSS和JS，只应用navbar.html中引用的CSS
好的，但是你必须在 navbar.html 中有不常见的标签，而不是 index.html
假设您在 navbar.html 中有类名“navbar”。所以你的 index.php 中不能有相同的类，这样 css 覆盖的机会就会更少。

标签： javascript html css include

【解决方案1】：

据我所知，我认为您想做的事情是不可能的。因为当您在 html 中包含任何文件时，在您的情况下，它的 navbar.html 当它最终在浏览器上呈现时，它会被视为单个 html 文件。将所有 css / js 应用到同一个 html 页面。

因此，您可以在 navbar.html 和 css 中使用不同的类名。所以不会影响到其他 index.html 元素。

希望对你有帮助。

【讨论】：

【解决方案2】：

css 可以被覆盖，所以你可以使用你的类名作为 html 样式，所以在你的 css 之前编写核心 css。

除了javascript，你可以使用全局变量来管理你的变量，避免全局命名空间污染。

【讨论】：

对不起，我不明白。覆盖 CSS 是什么意思？我完全不明白第二部分
当你确定它会帮助 OP 时，答案必须是。