我想仅在用户登录到应用程序并且某个页面可见后加载脚本。我将页面设置为在我的ajax中显示块，然后我说如果页面设置为显示块获取脚本，但没有任何反应。
我做错了什么？
// Login POST
$('#frm-login').submit(function (e) {
event.preventDefault()
$loginButton.text('Please wait ...').prop('disabled')
$.ajax({
url: "/login-user",
type: "POST",
data: $('#frm-login').serialize(),
dataType: "json"
}).always(function (response) {
$loginButton.text('Logging in').prop('disabled')
console.log("Login", response)
if (response.status == "error") {
$loginButton.removeClass('lime').addClass('red').text('Log in failed. Try again.');
return
}
sessionStorage.setItem('token', response.token)
if (sessionStorage.token) {
$.ajax({
type: "GET",
url: "/verify-user",
headers: {
'Authorization': 'Bearer ' + sessionStorage.token
},
dataType: "json"
}).always(function (response) {
console.log("Auth", response)
if (response.status == "error") {
$loginButton.removeClass('lime').addClass('red').text('Log in failed. Try again.');
return
}
$('#index-page').css('display', 'none')
$('#main-page').css('display', 'block')
})
}
})
})
// add scripts to #main-page
if ($('#main-page').css('display') == 'block') {
$.getScript('</script><script src="/js/socket.js"></script>')
console.log("JS loaded")
}
我的 html 基本上包装在这个 2div 中。
<body>
<div id="index-page">
</div>
<div id="main-page">
</div>
<!-- Compiled and minified JavaScript -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<script type="text/javascript" src="/js/index.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js"></script>
</body>
</html>
看起来有几件事正在发生。您只在最初运行脚本时检查#main-page块显示一次，而不是在脚本从登录和验证更改时检查一次。其次，$.getScript()的语法是$.getScript(url, success)(参见：https://api.jquery.com/jquery.getscript/(
我会在验证后移动脚本加载代码，如下所示：
// ...
$('#index-page').css('display', 'none')
$('#main-page').css('display', 'block')
// moved code
$.getScript('/js/socket.js', function () {
console.log('script loaded');
});