我可以使用后退按钮检测用户何时到达页面？

Edit: What I really need to know is if there is any javascript event that will reliably fire when the user arrives at the page via the back button. I tried the onload event for the body element, but it doesn't fire on Firefox or Safari.

编辑:我真正需要知道的是,当用户通过后退按钮到达页面时,是否有任何javascript事件可靠地触发。我尝试了body元素的onload事件,但它不会在Firefox或Safari上触发。

I'm working with some old code that tries to prevent double-submission of form data by disabling all form submission buttons as soon as the user clicks one (by listening to the form's onSubmit event). This code is applied to every form in the app, regardless of whether double-submission would even be a problem.

我正在使用一些旧代码,这些代码试图通过在用户单击一个按钮时禁用所有表单提交按钮(通过监听表单的onSubmit事件)来阻止表单数据的双重提交。此代码适用于应用程序中的每个表单,无论双提交是否甚至是一个问题。

The problem is that if the user hits the back button in Firefox or Safari, all the submit buttons are still disabled when he gets to the page. On Firefox, they are even disabled after a refresh (only a Ctrl+F5 refresh will do it)!

问题是,如果用户点击Firefox或Safari中的后退按钮,当他到达页面时,所有提交按钮仍然被禁用。在Firefox上,刷新后它们甚至被禁用(只有Ctrl + F5刷新才能执行)!

I've tried listening to body's onLoad event, but FF and Safari don't fire that when you get to the page via back button. (Interestingly, it is fired on a soft refresh on FF, even though the button stays disabled.)

我试过听过body的onLoad事件,但当你通过后退按钮到达页面时,FF和Safari不会触发。 (有趣的是,即使按钮保持禁用状态,它也会在FF上的软刷新时触发。)

Here's a very simple HTML doc that will show what I mean:

这是一个非常简单的HTML文档,它将显示我的意思:

<html><body>
<form name="theForm" id="theForm" action="test2.html"
      onSubmit="document.theForm.theButton.disabled = true;">
  <input id="theButton" type="submit" name="theButton" value="Click me!" />
</form>
</body></html>

Note: I've tested on WinXP with IE8, FF3.5, Safari 4, Opera 9, and Chrome 2.0. Only Safari and FF leave the button disabled when you use back to get to them.

注意:我已经使用IE8,FF3.5,Safari 4,Opera 9和Chrome 2.0在WinXP上进行了测试。只有Safari和FF在您使用返回时禁用该按钮。

4 个解决方案

#1

I don't think you can test for the back button specifically, but I believe you can check the browser's history position with Javascript.

我不认为你可以专门测试后退按钮,但我相信你可以用Javascript查看浏览器的历史记录位置。

#2

Isn't that the behaviour you want, so they don't double-submit using the back button?

这不是你想要的行为,所以他们不使用后退按钮双重提交?

Anyway, you could set a cookie on the following page, and detect that on load on the page with the form.

无论如何,您可以在下一页上设置一个cookie,并在带有表单的页面上检测到它。

#3

Yes. In javascript you can use visited.value

是。在javascript中,您可以使用visited.value

function checkrefresh()
 var visited = getCookie("visited");  
{
        if((form.visited.value == '' || form.visited.value == null) && (visited != '1') ) 
        {
            document.form.visited.value = "1";
                    document.cookie = "visited=1";
                    //here you set it to something so that next time they go to the page it will no longer be nothing and you can 'disable the button' see below.

        }
        else
        {
            document.form.submitbutton.disabled=true;
        }
    } 

function getCookie(name)
{
var re = new RegExp(name + "=([^;]+)");
var value = re.exec(document.cookie);
return (value != null) ? unescape(value[1]) : null;
}

you would call this in the onload tag FYI.

你可以在onload标签FYI中调用它。

#4

The answer by @tkotitan was probably correct when he wrote it. His answer led me to my solution. It's not foolproof, but it might be "good enough" to help in some situations.

@tkotitan的答案在他写作时可能是正确的。他的回答使我得到了解决方案。这不是万无一失的,但在某些情况下帮助可能“足够好”。

I improved my script and replaced it with the following. This version is for an intermediate page that now works as intermediate in both directions.

我改进了我的脚本并将其替换为以下内容。此版本适用于中间页面,现在可以作为两个方向的中间页面。

<?php
if($_SERVER['QUERY_STRING']=='')
{
    echo '<a href="go_back_test.php?page=1">Go forward</a>';
}
elseif($_GET['page']!=2)
{
    echo 'You cannot stay here.';
    echo '
    <script type="text/javascript">
    function test()
    {
        if (document.getElementById("detectback").value=="goneback")
        {
            document.getElementById("detectback").value=history.length;
        }
        if (document.getElementById("detectback").value==history.length)
        {
            document.getElementById("detectback").value="goneforward";
            window.location = "go_back_test.php?page=2"
        }
        else
        {
            document.getElementById("detectback").value="goneback";
            window.history.back();
        }
    }
    function updateform()
    {
        if(document.getElementById("detectback").value=="")
        {
            document.getElementById("detectback").value=history.length;
        }
    }
    </script>
    <img src="spacer.gif" onload="updateform(); test();"><br>
    <form>
        <input id="detectback" type="text" value="" style="display: none;">
    </form>
    ';
}
else
{
    echo 'Welcome to page 2';
}
?>

#1