Question

我正在处理一个依赖于Javascript运行的页面。它使用纯正的Javascript，不涉及JQuery或框架。当用户进入页面时，JavaScript将按预期执行。当他们导航到另一页面并使用“后退”按钮返回到原始页面时，该Javascript似乎不在Safari桌面中执行，但在Chrome和Firefox中执行。

似乎Safari可能正在加载页面的缓存版本，而不是重新加载页面，尽管事实是我随页面一起发送了缓存控制标头。我要发送的缓存控制标头是：

Cache-Control: no-cache, no-store, must-revalidate
Pragma: no-cache
Expires: 0

这是表现出相同行为的简单代码示例。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>JS Test</title>
</head>

<body>
<h1>JS Test</h1>

<p>This is a simple test file.</p>

<p id="hideMe">This paragraph should be hidden unless you came back.</p>

<p>Click <a href="https://www.google.com">here</a>.</p>

<script>
    /* Returns the search query variable value or false if not found */
    function getQueryVariable(varName) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i = 0 ;i < vars.length; i++) {
            var pair = vars[i].split("=");
            if(pair[0] == varName){
                return decodeURIComponent(pair[1]);
            }
        }
        return(false);
    }

    var windowLoaded = function() {
        console.log("windowLoaded starting...");

        /*
         * If back is not in the query string hide the paragraph and push the
         * query variable into our history.
         */
        var cameBack = getQueryVariable("back");
        if (!cameBack) {
            var p = document.getElementById("hideMe");
            p.hidden = true;
            history.pushState(null, null, "?back=true");
        }
    };
    
    window.onload = windowLoaded;
</script>
</body>
</html>

如果您在Chrome，Firefox或Safari（台式机）中访问此页面，您会发现#hideMe段落被隐藏，然后Javascript将?back=true推送到浏览器的历史记录中。接下来，如果您单击链接，您将转到Google。在Google中，单击“后退”按钮。在Chrome和Firefox中，将显示#hideMe段落。在Safari中，该段落仍将被隐藏。如果单击“重新加载”按钮，则Safari实际上将重新加载页面并执行Javascript。

您还可以检查Javascript控制台，当您从Google返回页面时，您将看到Safari从不调用windowLoaded。

当用户使用后退按钮导航到页面时，是否可以通过Safari使Safari运行Javascript？

当用户使用后退按钮导航到页面时，Safari桌面无法执行Javascript

0 个答案: