控制台引入想要的库

背景问题

在浏览网站时，经常遇到目标网站未引入 jQuery 等常用库的情况，这给我们进行页面调试、数据抓取或功能测试带来了不便。

解决方案

通过在浏览器控制台执行以下代码，可以动态引入所需的第三方库：

/**
 * 动态引入第三方库到当前页面
 * @param {string} src - 库的CDN地址
 * @param {string} id - script标签的id（可选，用于避免重复引入）
 */
function loadExternalLibrary(src, id = null) {
    // 检查是否已经引入该库
    if (id && document.getElementById(id)) {
        console.log('库已存在，无需重复引入');
        return;
    }
    
    const script = document.createElement('script');
    script.src = src;
    if (id) script.id = id;
    
    // 添加加载成功和失败的回调
    script.onload = () => console.log('库加载成功:', src);
    script.onerror = () => console.error('库加载失败:', src);
    
    document.head.appendChild(script);
}

// 使用示例：引入jQuery 3.3.1
loadExternalLibrary('https://cdn.bootcss.com/jquery/3.3.1/jquery.js', 'jquery-3.3.1');

简化版本（快速使用）

如果只是临时使用，可以直接执行：

var script = document.createElement('script');
script.src = 'https://cdn.bootcss.com/jquery/3.3.1/jquery.js';
document.head.appendChild(script);

技术原理

  1. 动态创建script标签 ：通过 document.createElement('script') 创建脚本元素
  2. 设置外部资源 ：将CDN地址赋值给 src 属性
  3. 插入DOM ：将script标签添加到页面的 <head> 部分
  4. 浏览器自动加载 ：浏览器会自动发起HTTP请求加载外部资源
posted @ 2025-09-08 16:20  谢书怜  阅读(8)  评论(0)    收藏  举报