使用javascript函数在页面初始化后加载jquery答案

【问题标题】：load jquery after page initialization using javascript function使用javascript函数在页面初始化后加载jquery
【发布时间】：2016-05-18 00:38:42
【问题描述】：

我正在开展一个项目，为现有的强制门户提供 facebook autentication。这个强制门户网站有一个自定义模板的选项，所以...我可以编辑 html 代码以显示我自己的一个。

问题是，由于某种原因，每次我像这样在模板上导入脚本

<script src="external http or https script"></script>

它失败了，结果是一个空白页面，没有从模板中加载任何内容...

我通过在页面加载后导入脚本找到了解决方案......

var script=document.createElement('script');
script.src="http://code.jquery.com/jquery-latest.min.js";
var head=document.getElementsByTagName('head')[0]
head.appendChild(script);

它正在工作......我可以在控制台上确认调用 $('body') 例如返回 html 的 body 元素......所以 jquery 准备好了......

我的问题：如果在使用 workaraound 加载 jquery 后，我加载了其他脚本（在这种情况下是 angular 和 socket.io），这些脚本会因 jquery 问题而失败

Uncaught ReferenceError: $ is not defined

我的问题：在 jquery 完成加载后，我该如何加载这些脚本... 我需要初始化jquery一些如何使用它吗？

提前致谢

完整代码

 <html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="expires" content="-1"/>
</head>
<body onload="initialFunction()">
<script>
function initialFunction(){
    document.getElementsByName('username')[0].placeholder="Nombre de Usuario"
    document.getElementsByName('password')[0].placeholder="Contraseña"
    var script=document.createElement('script');
    var angularScript=document.createElement('script');
    var socketScript=document.createElement('script');
    var angularFacebookScript=document.createElement('script');
    var appScript=document.createElement('script');
    var materializeScript=document.createElement('script');
    script.src="http://code.jquery.com/jquery-latest.min.js";
    angularScript.src="http://192.168.1.5/js/angular.js";
    socketScript.src="http://192.168.1.5:8080/socket.io/socket.io.js"
    angularFacebookScript.src="http://192.168.1.5/angular-facebook-master/lib/angular-facebook.js"
    appScript.src="http://192.168.1.5/js/app.js"
    materializeScript.src="http://192.168.1.5/js/materialize.min.js"
    var head=document.getElementsByTagName('head')[0]
    var body=document.getElementsByTagName('body')[0]
    head.appendChild(script);
    body.appendChild(angularScript);
    body.appendChild(socketScript);
    body.appendChild(angularFacebookScript);
    body.appendChild(appScript);
    body.appendChild(materializeScript);
}
</script>
<center>
    <style>
        body {
        background-color:#298eea;
        }
        ....some other stuff...
    </style>
    <div>
        <h3>{company_logo}</h3>
        <h2>Captive Portal</h2>
        <div id="__loginbox"></div> 
        //here I want to insert the facebook button with an angular controller to pass info to a backend via socket io.... I have already do that before ussing the "normal way"
    </div>
</center>
</body></html>

【问题讨论】：

你能显示索引 html 文件的完整代码吗？通过<script> 标签包含的正常方式，而不是 JS 解决方法。我想看看导入的顺序。
您可以在script 变量处使用onload 事件来执行相同的任务；那是;加载 jquery 时创建额外的 script 元素，在这些 script 元素处使用 onload 事件
见stackoverflow.com/questions/29805800/…
已发布完整代码...问题已编辑
@ArielWeinberger 感谢您的 cmets.. 我之前尝试过正常方式 :D... unfurtunatelly 不知道为什么结果是强制门户中断并仅显示一个 emty body 标签...使用它不会中断的工作区

标签： javascript jquery html

【解决方案1】：

尝试在script 变量中使用onload 事件

script.onload = function() {
  console.log(jQuery().jquery);
  // do stuff with jQuery script
}

angularScript.onload = function() {
  // do stuff with angular script
}

与socketScript、angularFacebookScript、appScript、materializeScript 类似

【讨论】：

excelent :D 刚刚在脚本的 onload 方法中加载了所有 jquery 依赖函数...非常感谢...