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

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

本文关键字：原始 应用 JS CSS 包含 html 文件      更新时间：2023-09-26

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

有没有办法包括一个单独的html文件，而不应用原始的引用CSS/JS ?

例如，我有一个文件"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?

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

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

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

希望对你有帮助。

CSS可以被覆盖，所以你可以使用你的classname作为HTML样式，这样你就可以在你的CSS之前编写核心CSS。

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

相关文章：