Question

在脚本文件中，我必须动态导入另一个脚本并使用其中定义的函数和变量。

现在，我将它添加到页面的HEAD部分，但是在添加它之后，外部脚本中定义的函数和变量不会被加载并准备好使用。我该怎么做并确保脚本已完全加载？

我尝试过使用script.onreadystatechange和script.onload回调，但我遇到了一些浏览器兼容性问题。

如何尽可能安全地使用使用纯JS 并获得良好的浏览器兼容性？

样品：

uno.js：

var script = document.createElement("script");
script.src = "dos.js";
script.type = "text/javascript";
document.getElementsByTagName("head")[0].appendChild(script);
alert(outerVariable); // undefined

dos.js：

var outerVariable = 'Done!';

sample.html

<html>
    <head>
        <script type="text/javascript" src="uno.js"></script>
    </head>
    ...
</html>

Answer 1

如果您关注非IE浏览器，我会尝试使用DOMContentLoaded来查看脚本是否已完全加载。

您可以详细了解here

实际上，这就是JQuery如何处理文档准备工作。这是来自jquery源的snippit：

    if ( document.addEventListener ) {
                // Use the handy event callback
                document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );

                // A fallback to window.onload, that will always work
                window.addEventListener( "load", jQuery.ready, false );
// If IE event model is used
        } else if ( document.attachEvent ) {
            // ensure firing before onload,
            // maybe late but safe also for iframes
            document.attachEvent( "onreadystatechange", DOMContentLoaded );

            // A fallback to window.onload, that will always work
            window.attachEvent( "onload", jQuery.ready );

            // If IE and not a frame
            // continually check to see if the document is ready
            var toplevel = false;

            try {
                toplevel = window.frameElement == null;
            } catch(e) {}

            if ( document.documentElement.doScroll && toplevel ) {
                doScrollCheck();
            }
        }

如果你要查看jquery代码来复制他们所做的事情，那就是完整源代码的bind ready函数。

Answer 2

到目前为止，这似乎是更好的工作方法。在IE9，Firefox和Chrome上测试过。

有任何疑虑吗？

<强> uno.js：

function loadScript(url, callback) {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;

    if (navigator.appName=="Microsoft Internet Explorer") {
        script.onreadystatechange = function(){
            if (script.readyState == 'loaded') {
                document.getElementsByTagName('head')[0].appendChild(script);
                callback();
            }
        };
    } else {
        document.getElementsByTagName('head')[0].appendChild(script);
        script.onload = function(){
            callback();
        };
    }
}

loadScript('dos.js', function(){
    alert(outerVariable); // "Done!"
});

Answer 3

使用onload（IE9-11，Chrome，FF）或onreadystatechange（IE6-9）。

var oScript = document.getElementById("script")
        oScript.src = "dos.js"
        if (oScript.onload !== undefined) {
            oScript.onload = function() {
                alert('load')
            }
        } else if (oScript.onreadystatechange !== undefined) {
            oScript.onreadystatechange = function() {
                alert('load2')
            }
        }

在运行时加载脚本并确保它何时加载

3 个答案: