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

load jquery after page initialization using javascript function

本文关键字：初始化 加载 jquery javascript 函数 使用      更新时间：2023-09-26

我正在进行一个项目，为现有的专属门户提供facebook认证。这个专属门户有一个自定义模板的选项，所以…我可以编辑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已经准备好了。。。

我的问题：如果在加载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>

尝试在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

相关文章：