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)限制。
- 避免重复注入相同资源,可添加检查逻辑。