Question

我只想在用户登录到应用并且某个页面可见后才加载脚本。我将页面设置为 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基本上包含在这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');
            });

脚本不会在以下条件下加载

1 个答案: