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

I am working on a project to provide facebook autentication to an existing captive portal. This captive portal has one option to customize the template so... I can edit the html code to show one of my own.

我正在开发一个项目,为现有的强制门户提供facebook身份验证。这个强制网络门户有一个选项来自定义模板,所以...我可以编辑html代码来显示我自己的一个。

The problem is that for some reason every time I import a script on the template like this

问题在于,每次我在模板上导入脚本都是出于某种原因

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

it fails and the result is a blank page with nothing loaded from the template...

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

I had found a solution by importing the script after the page has loaded like this....

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

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

It is working ... I can confirm on console that calling $('body') for example return the body element of html.. so jquery is ready...

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

My problem: If, after loading jquery ussing the workaraound I load other scripts (angular and socket.io in this case) those scripts fail with jquery issues

我的问题:如果在加载jquery后我使用其他脚本(在这种情况下是angular和socket.io),那些脚本会因为jquery问题而失败

Uncaught ReferenceError: $ is not defined

My question: How can i do to load those scripts after the jquery has finish loaded... Do I need to initialize jquery some how to use it?

我的问题:如何在jquery完成加载后加载这些脚本...我是否需要初始化jquery如何使用它?

Thanks in advance

提前致谢

FULL CODE

 <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>

1 个解决方案

#1

Try using onload event at script variables

尝试在脚本变量中使用onload事件

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

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

similarly with socketScript, angularFacebookScript, appScript, materializeScript

类似于socketScript,angularFacebookScript,appScript,materializeScript

#1