自动加载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加载完成");
})();