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

Question

首先我是新来的，如果问题写得不好请见谅

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

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

<!-- 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，它有自己的外部样式 sheet 参考。

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

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

有什么方法可以在仅应用所需的 CSS 和 JS 的同时包含页面？

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

Answer 1

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

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

希望对你有帮助。

Answer 2

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

和javascript一样，您可以使用全局变量来管理您的变量，避免全局命名空间污染。

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

Include html file in page without applying original pages CSS/JS

html

javascript

css

include