load 与 inject
什么是 load？
在 Web 开发中，“load” 通常指加载资源，例如通过 <script>、<link> 标签静态加载 JavaScript 或 CSS 文件，
也可以通过 JavaScript 动态加载外部资源。
常见的动态加载方式包括：
- 使用
document.createElement('script')加载 JS - 使用
fetch()获取远程内容 - 监听
window.onload或element.onload事件
什么是 inject？
“Inject”（注入）一般指在运行时将代码、样式或内容插入到页面 DOM 中。 这在插件系统、广告脚本、A/B 测试、动态主题切换等场景中非常常见。
典型注入方式包括：
- 向
<head>插入<style>或<link> - 向页面任意位置插入 HTML 片段
- 执行动态获取的 JavaScript 字符串（谨慎使用）
示例：动态 load 并 inject 脚本
以下是一个简单的原生 JavaScript 示例，演示如何动态加载并注入一个外部脚本：
function loadAndInjectScript(src) {
const script = document.createElement('script');
script.src = src;
script.async = true;
document.head.appendChild(script);
}
// 使用示例
loadAndInjectScript('https://example.com/script.js');注意事项
- 动态注入的内容可能影响 SEO，搜索引擎不一定能执行 JavaScript。
- 注意跨域问题和内容安全策略（CSP）限制。
- 避免重复注入相同资源，可添加检查逻辑。