Skip to content

自动加载JS脚本

  • 页面没有 AMD/RequireJS 的 window.define 时:<script src="..."> 加载,会自动挂载 window.html2canvas,浏览器控制台直接 html2canvas() 可以调用。
  • 如果页面存在 window.define(比如页面引入了 requirejs、system.js 等 AMD 模块器),UMD 会进入 AMD 分支,不会挂载 window 全局window.html2canvas === undefined

动态创建 script 标签加载时,如果环境里有 define,就拿不到全局变量

js
// 在加载脚本的时候设置了window上全局挂载windows变量,使用时注意使用window[windows].html2canvas
(async () => {
    function loadScriptForceGlobal(src, windows = "windows") {
        return new Promise((resolve, reject) => {
            const script = document.createElement('script');
            script.src = src;

            // 关键:临时隐藏AMD的define,迫使UMD输出到window
            const savedDefine = window.define;
            window.define = undefined;

            script.onload = () => {
                // 加载完成恢
                window.define = savedDefine;
                resolve(window[windows].html2canvas);
            };
            script.onerror = (err) => {
                window.define = savedDefine;
                reject(err);
            };
            document.body.appendChild(script);
        });
    }

    // 先加载html2canvas,得到全局
    const h2c = await loadScriptForceGlobal("https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js","self");
    console.log("window.html2canvas", window.html2canvas, h2c);

    // 再加载依赖全局html2canvas的3.js
    await new Promise((resolve, reject) => {
        const s = document.createElement('script');
        s.src = "https://192.168.0.50:8001/3.js";
        s.onload = resolve;
        s.onerror = reject;
        document.body.appendChild(s);
    });
    console.log("3.js加载完成");
})();