如何在SharePoint（经典版）页面加载自定义HTML/CSS/JS代码

核心原因 #

你遇到的问题是经典SharePoint默认会加载大量自带的全局样式，自定义代码的CSS如果没有做作用域隔离，就会和系统默认样式互相污染。

可行解决思路 #

• 最稳妥方案：用iframe沙箱隔离
  将你写好的完整HTML/CSS/JS文件上传到SharePoint站点的文档库后，直接在目标页面添加「页面查看器」Web部件，配置该Web部件的源地址为你上传的HTML文件的站点相对路径。iframe天然隔离CSS、JS运行环境，完全不会影响SharePoint本身的顶部栏、侧边栏等系统组件的布局，仅需按需调整iframe的宽高适配展示需求即可。注意要给所有访问用户开放该HTML文件所在文档库的读取权限，避免权限报错。
• 如果不用iframe，必须做严格的CSS作用域隔离
  仅使用类、ID选择器不足以规避冲突，需要给所有自定义代码外层套一个唯一标识的根容器，示例：

  <div id="my-custom-app-root">
    <!-- 所有你的自定义HTML代码都放在这个容器内部 -->
  </div>
  

  所有自定义CSS选择器必须加上该根容器的前缀，示例：

  /* 错误写法，会匹配页面内所有该类元素，包括SharePoint自带的 */
  .btn-primary {
    background: blue;
  }
  /* 正确写法，仅匹配自定义容器内的元素 */
  #my-custom-app-root .btn-primary {
    background: blue;
  }
  

  同时严格禁止以下写法：
  • 用*通配符写全局reset样式
  • 给body、html、table、div等通用标签直接加样式
  • 写不带根容器前缀的任何全局选择器
• 调整嵌入方式
  不要直接上传完整HTML文件覆盖SharePoint页面，推荐用「脚本编辑器」或者「内容编辑器」Web部件嵌入自定义代码：将CSS、JS分别单独上传到站点资源库，在Web部件中仅引用资源地址，把HTML代码写在Web部件的内容区域即可，Web部件自带的容器也可以作为你的CSS根节点使用。
• 调试定位冲突
  如果还是出现布局错乱，按F12打开浏览器开发者工具，用元素选择器选中错乱的SharePoint系统组件，查看样式面板中生效的属性来源，找到你自定义CSS中匹配到该组件的选择器，加上根容器前缀即可修复。

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