Question

这可能是一个重复的问题，但有一件事我需要知道，我无法在任何其他问题上找到它。

如果点击浏览器刷新后退按钮但是没有任何其他按钮（如主页等）将页面重定向到另一个页面，我怎么能弹出警告框？

我能够使用此代码制作一个警告框：

<script type="text/javascript">
    window.onbeforeunload = function() {
        return 'If you resubmit this page, progress will be lost.';
    };
</script>

但是当我点击我的主页按钮（将页面加载到另一个页面）时，警报框仍会触发。我只需要为BROWSER的刷新和后退按钮提供警告框。

非常感谢任何帮助。提前致谢。：）

更新

这是与jsfiddle.net兼容的代码，但不适用于我的浏览器。

<html>
<head>
<script>
    var btn = document.getElementById('homepage'),
    clicked = false;

    btn.addEventListener('click', function () {
    clicked = true;
    });

    window.onbeforeunload = function () {
    if(!clicked) {
    return 'If you resubmit this page, progress will be lost.';
    }
    };
</script>
</head>

<body>
    <form method="post" action="something.php" name="myForm">
        <input type="submit" name="homepage" value="Please Work" id="homepage" href="something.php">
    </form>
</body>
</html>

现在我的问题是它可以在我的浏览器中工作但是与jsfiddle.net一起工作的原因是什么？有什么我错过了吗？要配置的东西等？感谢。

JSFIDDLE LINK： http://jsfiddle.net/bawvu7yy/4/

Answer 1

只有在文档中存在单击的按钮时，才能确定单击的内容以触发导航。假设这个＆＃34;主页＆＃34; button是相关文档中的一个元素，也许您可以使用一个标记来跟踪是否单击了该按钮。

// assume that the homepage button has an id "homepage".
var btn = document.getElementById('homepage'),
    clicked = false;

btn.addEventListener('click', function () {
  clicked = true;
});

window.onbeforeunload = function () {
  if(!clicked) {
    return 'If you resubmit this page, progress will be lost.';
  }
};

这样，弹出窗口只会在其他任何原因导致页面导航时发生。

编辑：我已在此jsfiddle上提供了一个工作演示。该链接不会触发弹出窗口，但其他两个按钮的行为与＆＃34; back＆＃34;完全相同。和＆＃34;刷新＆＃34;，触发弹出窗口。在this update中，clicked = true;已被注释掉，这表明当主页按钮未执行时，弹出窗口也会开始显示。

第二次编辑：您在元素存在之前运行脚本。将内置JavaScript的<script>标记移至<body>。

的底部

Answer 2

在javascript中使用window.onbeforeunload函数使用下面的代码。

<script type="text/javascript">
     window.onbeforeunload = function() { return "Are you sure you want to leave?"; }
</script>

希望这有助于你

如何在php中单击浏览器的刷新或后退按钮时创建警告框？

2 个答案: