如何使用PHP include引入外部代码且不影响原有页面样式

方案一：添加唯一父容器前缀，限定样式作用域 #

这是前端最常用的样式隔离手段，核心是给banner的所有内容套一个唯一的父容器，然后修改banner的CSS文件，让所有样式选择器仅作用于该容器内部。

操作步骤： #

1. 修改banner_a.php，给所有内容包裹一个带唯一class的容器：

<div class="banner-a-unique-container">
  <!-- 原来的link标签和HTML结构 -->
  <link rel="stylesheet" href="banner_a/assets/web/assets/icons/icons.css">
  <link rel="stylesheet" href="banner_a/assets/bootstrap/css/bootstrap.min.css">
  <!-- 其余样式和横幅内容 -->
</div>

2. 批量修改banner的所有CSS文件，给每个选择器前加上.banner-a-unique-container前缀：
   • 比如原CSS中的.container改为.banner-a-unique-container .container
   • .card改为.banner-a-unique-container .card
   • 若使用Bootstrap这类框架，可通过自定义编译（修改Sass/Less变量添加父容器前缀）或PostCSS的postcss-scoped插件自动批量处理，避免手动修改的繁琐。

修改后，banner的所有样式只会作用在.banner-a-unique-container内部，不会污染全局样式。

方案二：使用Shadow DOM实现原生样式隔离 #

Shadow DOM是HTML5提供的原生样式隔离机制，内部的DOM和样式完全独立于主文档，不会与外部样式互相干扰。

操作步骤： #

修改banner_a.php，用JS创建Shadow DOM并插入内容：

<div id="banner-a-shadow-host"></div>
<script>
// 获取宿主元素
const shadowHost = document.getElementById('banner-a-shadow-host');
// 创建Shadow Root
const shadowRoot = shadowHost.attachShadow({ mode: 'open' });
// 将banner的样式和HTML插入到Shadow DOM中
shadowRoot.innerHTML = `
<link rel="stylesheet" href="banner_a/assets/web/assets/icons/icons.css">
<link rel="stylesheet" href="banner_a/assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="banner_a/assets/bootstrap/css/bootstrap-grid.min.css">
<link rel="stylesheet" href="banner_a/assets/bootstrap/css/bootstrap-reboot.min.css">
<link rel="preload" as="style" href="banner_a/assets/file/css/additional.css">
<link rel="stylesheet" href="banner_a/assets/file/css/additional.css" type="text/css">
<div class="overlay" style="opacity: 0.4; background-color: rgb(68, 121, 217);"></div>
<div class="container">
    <!-- 其余横幅HTML结构 -->
</div>
`;
</script>

注意：Shadow DOM中的相对路径是相对于当前页面（index.php）的，需确保样式文件路径正确。现代浏览器均支持Shadow DOM，兼容性无需担忧。

方案三：使用iframe嵌入（快速隔离） #

如果不想修改原有banner的样式或DOM结构，可直接用iframe嵌入banner页面，iframe的样式和DOM完全独立于主页面。

操作步骤： #

修改index.php中的引入代码，替换为iframe：

<!-- BANNER -->
<iframe src="banner_a/banner_a.php" frameborder="0" style="width: 100%; border: none; display: block;"></iframe>

若需要自适应高度，可添加JS动态调整：

<iframe id="banner-iframe" src="banner_a/banner_a.php" frameborder="0" style="width: 100%; border: none; display: block;"></iframe>
<script>
document.getElementById('banner-iframe').addEventListener('load', function() {
  this.style.height = this.contentWindow.document.body.scrollHeight + 'px';
});
</script>

缺点：iframe会有一定性能开销，且对SEO有轻微影响，但胜在实现简单，无需修改原有banner代码。

内容的提问来源于stack exchange，提问作者Gabriela Quinteros