从 location.href 备份时,页面无法正确启动

Page doesn't initilize properly when backing from location.href

本文关键字:启动 href location 备份      更新时间:2023-09-26

我刚刚写完了相当多的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是具有多个属性(包括 link(URL)))的对象Array
  • toStory()是一个函数,它滑动到给定要滑动的故事的选定故事,方向(从左到右或从右到左,由"l2r""r2l"给出)是否重置当前故事的位置(由"yes""no"给出)以及动画更改的时间。 除第一个参数外,所有参数都是可选的。
  • debugText()是一个简单的函数,如果布尔值(debugging)为真,它设置.innerHTML(或者更确切地说,通过jQuery .html())。

当页面被备份时,问题最直接的迹象是调试文本仍然存在(并设置为它设置的最后一项,在本例中为"离开页面@ [url]")。 Javascript也已经戛然而止(需要告诉几个变量,他们还没有完成页面,只是因为有人点击了它)。

可以检测何时离开页面,然后将内容设置为所需状态。

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

你可以改用history.pushState方法,只需要确保它首先被支持

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