如何在DOM完全加载之前在DOM的头部插入脚本标记?

时间:2017-04-20 09:43:03

标签: javascript html dom

所以我使用Electron框架构建一个应用程序来加载页面并将自己的脚本注入其中。但是,module在全局范围内定义,jQuery脚本因此没有看到window对象

if ( typeof module === "object" && typeof module.exports === "object" ) {
  // set jQuery in `module`
} else {
  // set jQuery in `window`
}

这是因为启用了节点集成,我希望我的注入脚本能够运行。结果,问题是客户端脚本无法正常工作,我看到像

这样的错误
Uncaught ReferenceError: jQuery is not defined
custom.min.js:1 Uncaught ReferenceError: jQuery is not defined
homeOffer.min.js:1 Uncaught ReferenceError: $ is not defined
main.js:48 Uncaught ReferenceError: $ is not defined

如果我在客户端页面上的任何脚本运行之前设置window.module = undefined,那么它可以正常工作。

我希望通过插入脚本标记来修改DOM,该标记会在任何脚本运行之前将module设置为undefined

我有document对象的句柄,我尝试了下面的

document.addEventListener("DOMContentLoaded", function(event) {
    var s = document.createElement("script");
    s.innerHTML = "console.log('hello from script'); window.module = undefined;";
    document.head.insertBefore(s, document.head.childNodes[0]);
    console.log('dom loaded');
});

然而,问题是如果在解析DOM并且所有脚本都已运行且因此无法达到目的而触发事件DOMContentLoaded

我的问题是可以在客户端页面上运行任何脚本之前运行我的脚本标记吗?

1 个答案:

答案 0 :(得分:1)

尝试:

  1. 创建/script1.js

  2. 等脚本文件
  3. 使用以下脚本添加:

    var jq = document.createElement('script');

    jq.src =“http://www.example.com/script1.js”;

    document.getElementsByTagName( '头')[0] .appendChild(JQ);

    jQuery.noConflict();

  4. 像我添加jquery脚本一样:

    var jq = document.createElement('script');
    jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js";
    document.getElementsByTagName('head')[0].appendChild(jq);
    // ... give time for script to load, then type (or see below for non wait option)
    jQuery.noConflict();