0

我刚刚完成了相当大量的 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);
        }
    }
}
  • 此代码来自故事滚轮，用于移动网站。通过从屏幕一侧滚动并从另一侧滚动，故事会通过列表发生变化。
  • 这个函数是触摸端监听器指向的。每当手指（任何手指）从屏幕上移开时，它就会被触发。可以在这里找到触摸事件的一个很好的简单细分。
  • roll_data是一个Array具有多个属性的对象，包括link（一个 url）。
  • toStory()是一个滑动到选定故事的功能，给定要滑动到的故事，方向（从左到右或从右到左，由"l2r"and给出"r2l"）是否重置当前故事的位置（由"yes"or给出"no"）和时间动画变化。除第一个参数外，所有参数都是可选的。
  • debugText()是一个简单的函数，它设置.innerHTML（或者更确切地说，.html()通过 jQuery）如果布尔值 ( debugging) 为真。

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

4

2 回答 2

2

可以检测何时离开页面并将其设置为所需状态。

<!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>
于 2012-07-02T15:55:01.753 回答
1

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

if (history.pushState)
    history.pushState("", "", url);
else
    window.location = url;
于 2012-07-02T16:38:03.267 回答