[FE] 如何动态加载js文件

1. innerHTML的问题

使用innerHTML插入<script>标签,其中的js文件是不会加载的,

document.getElementById('div1').innerHTML = `
    <script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
`;

虽然DOM中有了这些节点,但是js文件还是没有加载,更没有被调用,

<div id="div1">
    <script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
</div>

我们在控制台实验一下:

> window.jQuery
undefined

MDN中,对innerHTML的解释如下,

const name = "<script>alert('I am John in an annoying alert!')</script>";
el.innerHTML = name; // harmless in this case

Although this may look like a cross-site scripting attack, the result is harmless. HTML5 specifies that a <script> tag inserted via innerHTML should not execute.

2. 动态创建

我们可以动态创建script元素,将它插入DOM中,来加载js文件,

const install = ({ src, success }) => {
    const script = document.createElement('script');

    script.src = src;
    script.async = false;    // 默认值为true
    script.onload = success;

    const head = document.getElementsByTagName('head')[0];
    head.appendChild(script);
}

例子:

install({
    src: '//code.jquery.com/jquery-3.2.1.min.js'
});

install({
    src: './1.js'    // 内容为:alert(window.jQuery);
});

其中,script.async默认值为true,表示加载的js文件会异步执行,
MDN中,对async的解释如下,

async
A boolean attribute indicating that the browser should, if possible, execute the script asynchronously. This attribute must not be used if the src attribute is absent (i.e. for inline scripts). If it is included in this case it will have no effect. Dynamically inserted scripts execute asynchronously by default, so to turn on synchronous execution (i.e. scripts execute in the order they were loaded) set async=false.

如果设置了script.async = false;
1.js会弹出提示function function(a,b){return new r.fn.init(a,b)}

否则,在默认情况下,script.asynctrue
1.js会弹出提示undefined


参考

MDN: Element.innerHTML - Security considerations
MDN: <script> - async

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • NAME dnsmasq - A lightweight DHCP and caching DNS server....
    ximitc阅读 2,936评论 0 0
  • =========================================================...
    lavor阅读 3,508评论 0 5
  • 浏览器中script标签加载顺序是如何的呢?这个问题折腾了好几次了,之前弄清楚了以后,觉得做不做笔记的无关紧要,可...
    世事如烟_f411阅读 1,549评论 0 1
  • 我不知道这一生还会遇到多少人,还会真的愿意接受哪些人,这段时间来,莫名的恐惧总是涌上心头,特别是一个人独处的时候,...
    可爱的兔子呀阅读 238评论 0 0
  • 五月,我们有两种身份,一种是学生,一种是社会人士; 五月,我们有两种选择,一种是深造,一种是淡出;五月,宿舍内灯火...
    成长路阅读 232评论 0 0