Question

我刚刚写完了相当多的Javascript（除了最相关的部分外，我会把所有的东西都省下来），而我只留下一个问题。

有一次，我需要使用location.href前进到文章页面。如果用户从文章页面单击其浏览器的后退按钮，则会返回主页（好），但页面处于最初离开时的状态（不良）。

Javascript根本没有意识到页面已经改变了，也许更令人惊讶的是，HTML也没有（有几个地方我使用Javascript来修改常设HTML）。

少量披露：这是一个移动网站。我正在使用触摸事件来聆听一个元素的短按（而不是长时间拖动）。任何我尝试过的非Javascript链接都会拖累拖动位，因为它没有太多关心手指已经用了多长时间，并且如果你试图在拖动的同时移动手指，通常就会变得怪异。

我想不出任何其他在这里非常有用的代码，但我很乐意发布任何内容。

谢谢！

-S

根据要求，以下是一些相关代码：

function t_end(e)
{
    var touch = e.changedTouches[0]; // Get the information for finger #1

    // we only really care if we've been dragging already,
    // and the finger that's been lifted is the same (first)
    // finger from the initial touch.
    if(dragging && !change_ready && touch.identifier == touchID)

    {
        var spd = (100.0 * touch.pageX / $(document).width() - last_touch[0].x)/(new Date() - drag_time);

        // if the finger has been down for a very short time,
        // and is not moving quickly when removed, this will
        // count as a click, and not a drag.
        if(new Date() - start_time < 50 && spd < .2 && spd > -.2)
        {
            debugText("leaving for page @ " + roll_data[current_story].link);
            location.href = roll_data[current_story].link;
        }else{

            var dir, new_story;

            // at higher speeds we will swap stories.
            // at lower speeds will will just return.
            if(spd > .2 || spd < -.2)
            {
                if(spd < 0)
                {
                    new_story = (current_story > 0 ? current_story - 1 : story_count - 1);
                    dir = "r2l";
                }else{
                    new_story = (current_story < story_count - 1 ? current_story + 1 : 0);
                    dir = "l2r";
                }
            }else{
                new_story = current_story;

                // nx: new x.  The point to which the
                // finger has dragged the current story
                var nx = 100.0 * touch.pageX / $(document).width() - anchor_point.x;
                if(nx < 0)
                {
                    current_story = (current_story > 0 ? current_story - 1 : story_count - 1);
                    dir = "l2r";
                }else{
                    current_story = (current_story < story_count - 1 ? current_story + 1 : 0);
                    dir = "r2l";
                }
            }

            change_ready = true;
            dragging = false;

            toStory(new_story, dir, "no", 100);
        }
    }
}

此代码来自故事滚筒，可在移动网站上使用。故事通过列表更改，从屏幕一侧滚动并滚动另一个。
此功能是触控端指向的功能。每当手指（任何手指）从屏幕上移除时，它就会被触发。可以找到触摸事件的简单细分here。
roll_data是Array个对象，其中包含多个属性，包括link（网址）。
toStory()是一个滑动到选定故事的函数，指定要滑动的故事，方向（从左到右或从右到左，由"l2r"和"r2l"给出）是否或者不重置当前故事的位置（由"yes"或"no"给出）以及为变化设置动画的时间。除第一个参数外，所有都是可选的。
debugText()是一个简单的函数，如果布尔值（.innerHTML）为真，则通过jQuery设置.html()（或更确切地说，debugging。

当页面被备份时，问题的最直接迹象是调试文本仍然存在（并设置为它设置的最后一个，在这种情况下“离开页面@ [url]” ）。 Javascript也出现了尖叫停止（需要告诉几个变量，因为有人点击了它而没有完成页面）。

Answer 1

可以检测页面何时离开，然后将事物设置为所需状态。

<!DOCTYPE html>
<html>
<head>
    <title>unload demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
        function resetPage() {
            // alert("unload");
            // reset page here
        }
    </script>
</head>
<body onunload="resetPage();">
    hello world
</body>
</html>

Answer 2

您可以使用history.pushState方法，只需确保首先支持

if (history.pushState)
    history.pushState("", "", url);
else
    window.location = url;

从location.href备份时，页面无法正确初始化

2 个答案: