创建script元素
var script = document .createElement ('script' );
document .head .appendChild (script);
script.addEventListener ('load' , ev => {
});
script.src = '/foo.js' ;
示例
index.tsx
import './index.html' ;
import * as ReactDOM from 'react-dom' ;
import ohMyJs from '!file-loader!./oh~my~js.js' ;
ReactDOM.render((
<div>
<h1 id="load" >未加载JS</h1>
<button onClick={() => {
var script = document .createElement('script' );
document .head.appendChild(script);
script.addEventListener('load' , (ev) => {
document .getElementById('load' ).innerText = `计算完毕,F(${window .MAX}) = ${window .FMAX}`;
});
setTimeout(() => {
script.src = ohMyJs;
document .getElementById('load' ).innerText = '脚本执行中' ;
}, 200 );
}}>
动态加载JS,计算斐波拉契数列
</button>
</div>
), document .querySelector ('#app' ));
oh~my~js.js
console .log ('on~my~js 加载中' );
function F (n ) {
if (n < 2 ) return 1 ;
return F (n - 1 ) + F (n - 2 );
}
window .MAX = 42 ;
for (var i = 0 ; i < MAX ; i++) {
console .log (i, window .FMAX = F (i));
}
console .log ('on~my~js 加载完毕' );
通用解决方案
function injectJS (src, onload ) {
var loaded = Array .from (document .scripts ).some (it => it.getAttribute ('src' ) === src);
if (loaded) {
typeof onload === 'function' && onload ();
return ;
}
var script = document .createElement ('script' );
script.src = src;
document .head .insertBefore (script, document .head .firstElementChild );
script.addEventListener ('load' , (ev ) => {
typeof onload === 'function' && onload ();
});
}
END
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
2019-01-13 神秘的网站 List