在以下情况下不加载脚本

Question

我想加载一个脚本只有在用户登录应用程序并且某个页面是可见。我在 ajax 中将页面设置为 display block，然后我说如果页面设置为 display block 得到脚本但没有任何反应。

我做错了什么？

// 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基本上就是包裹在这2个div里面了。

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

Answer 1

看起来好像发生了一些事情。您只检查 #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');
            });

在以下情况下不加载脚本

Script doesn't load in the following condition

ajax

jquery

if-statement

display