Question

我已经完成了所有工作，但是在添加了一个外部javascript文件（顺便说一下，只有几行短线）后，它会延迟加载popup.html。

这种延迟很烦人，我认为通过异步加载javascript文件，它将摆脱这种滞后。

该文件以popup.html编写，如下所示：

<script src="https://domain.com/myexternalscript.js"></script>

我不确定如何异步加载此文件。那我怎么能这样做呢？

Answer 1

由于您正在为Chrome开发，我确实理解在加载前内联脚本的问题。我写了这个AJAX（jQuery）片段，希望你能发现它有用：

   $.ajax({
            type: "GET", //or post?
            url: "http://FOOBAR.COM",   //change the url obviously..
            datatype: "script", //identify the expected income 
            async: "true", //async is "true" by default, but let's make sure it's #t
            success: function(result) {
                /**now we append the script to the document, nothing too special,
                   just pay attention we inject it INSIDE the item and not as the src**/
                var scr = document.createElement('script');
                scr.innerHTML = result;
                document.body.appendChild(scr)

            },
            error: function(result) { 
            //a simple error handling using the same method we used for the success
                console.log(result) 
                var scr = document.createElement('script');
                scr.innerHTML = "alert('ERROR!')";
                document.body.appendChild(scr)
            }

       });

Answer 2

有两种解决方案：

将脚本标记移动到html页面的末尾。
使用脚本标记上的defer属性，但旧浏览器不支持该属性。

Answer 3

延迟可能是因为源是安全的http（https）请求，而不仅仅是普通的http请求。根据您的特定主机方案，这可能会也可能不会产生影响。已经提出并提出了论据和证据来支持这一概念，相反。

我不认为异步加载文件会解决你的问题，因为你会发出相同的http请求......这就是AJAX的作用;它允许我们从服务器请求信息而无需重新加载页面。

如果它只是几行JS，那么为什么不将它包含在你的.html文档中呢？

此外，您还没有描述您遇到的问题。也许你可以详细说明一下？

如何在popup.html中异步加载外部javascript文件？

3 个答案: