将脚本注入到带有回调的页面答案

【问题标题】：Injecting a script to page with callback将脚本注入到带有回调的页面
【发布时间】：2012-10-06 09:12:41
【问题描述】：

我正在尝试将 yepnope.js 注入页面，然后使用 yepnope 加载其他 JS 文件。

Chrome 开发工具的网络选项卡显示 yepnope 已获取，元素选项卡显示元素已注入。但控制台标签显示：

Uncaught ReferenceError: yepnope is not defined

这是我的代码：

var betaApp = {


    injectYepnope: function(url) {
        var gp = document.createElement( 'script' );
        gp.type = 'text/javascript';
        gp.async = true;
        gp.src = url;

        gp.onload = betaApp.yepnopeLoaded;
        // Only for IE 6 and 7
        gp.onreadystatechange = function()
        {
            if( this.readyState == 'complete' )
            {
                betaApp.yepnopeLoaded();
            }
        }

        document.body.appendChild(gp);
    },

    yepnopeLoaded: function() {
        yepnope([
            {
                load: ['//cdnjs.cloudflare.com/ajax/libs/json2/20110223/json2.js', 'http://raw.github.com/andris9/jStorage/master/jstorage.js'],
                complete: function() {
                    betaApp.firstPartLoaded();
                }
            },
            {
                load: [
                    'http://code.jquery.com/jquery-1.8.2.min.js',
                    'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js',
                    'https://raw.github.com/Automattic/Iris/master/dist/iris.js',
                    'https://raw.github.com/cnkt/eksi-beta/master/ui/js/twitter-bootstrap/js/bootstrap-modal.js',
                    'https://raw.github.com/Automattic/Iris/master/src/iris.min.css'
                ],
                complete: function() {
                    betaApp.allJsLoaded();
                }
            }
        ]);
    }
};

betaApp.injectYepnope('https://raw.github.com/cnkt/eksi-beta/master/ui/js/yepnope.js');

提前致谢。

【问题讨论】：

标签： javascript dynamic-script-loading

【解决方案1】：

您的代码本身很好，但您需要确保在 DOM 准备好之后调用它，否则它无法将脚本附加到文档。

要么使用库 onReady 事件（例如 JQuery.ready()） - 如果此代码必须在外部文件中，您唯一的选择，或者只是将脚本直接添加到 HTML 的末尾文件。

【讨论】：

我将您的代码复制粘贴到一个新创建的 JS 文件（意思是：空），它给了我：“未捕获的 ReferenceError：yepnope 未定义”
您的问题是脚本加载时 DOM 尚未准备好（JS 阻塞记住），因此您的脚本不存在可将脚本附加到的文档 - 如果您将该脚本直接添加到 HTML文档（不在外部文件中）它应该可以工作，最好等到 DOM 准备好后再初始化
但开发工具的元素选项卡显示“脚本”标签附加到“正文”元素。
您是否尝试过将所有代码直接放入 HTML/调用 dom 准备好了吗？打赌你喝啤酒吧 :-)
这是一个页面的用户脚本。在加载此脚本之前，我无法修改 HTML。