GVKun编程网logo

如何获取onbeforeunload事件的目标URL?(获取事件指令)

14

在这篇文章中,我们将带领您了解如何获取onbeforeunload事件的目标URL?的全貌,包括获取事件指令的相关情况。同时,我们还将为您介绍有关ASP.NETlinkbutton两次提高onBefo

在这篇文章中,我们将带领您了解如何获取onbeforeunload事件的目标URL?的全貌,包括获取事件指令的相关情况。同时,我们还将为您介绍有关ASP.NET linkbutton两次提高onBeforeUnload事件、a标签href属性值对onbeforeunload事件的影响、beforeunload事件、Firefox中beforeunload事件的实现缺陷浅析_javascript技巧的知识,以帮助您更好地理解这个主题。

本文目录一览:

如何获取onbeforeunload事件的目标URL?(获取事件指令)

如何获取onbeforeunload事件的目标URL?(获取事件指令)

我已经搜索了几个小时,但找不到解决方案。

window.onbeforeunload = warn;

这不起作用:

function warn (e) {    var destination = e.href;   alert(destination );}

好的,所以要清除一切。如果用户单击页面本身上的链接,这很容易,因为您可以向所有链接onclick事件添加事件处理程序,但是。我想捕获该地址,即用户在浏览器的url框中键入的内容。

答案1

小编典典

因为这无法完成。新位置是私人/敏感信息。没有人希望您知道他们离开您的网站后会访问哪些网站。

ASP.NET linkbutton两次提高onBeforeUnload事件

ASP.NET linkbutton两次提高onBeforeUnload事件

我发布了这个 here,但认为它可能值得一个问题.

我正在尝试做的是显示一个对话框,询问用户是否有未保存的更改时他/她是否要离开页面.一切正常.但问题描述如下:

有没有人遇到过Internet Explorer两次触发onb​​eforeunload事件的问题?在谷歌搜索时,我发现它与(以及其他)ASP.NET链接按钮的事实有关,HTML代码是< a href =“javascript:__ doPostBack .... 显然,当IE鼓励一个没有href =“#”的链接时,它会触发onb​​eforeunload事件.然后,当您确认我们正在显示的javascript对话框时,页面将执行“真实”卸载以导航到另一个页面,并再次引发onbeforeunload事件. 互联网上提供的解决方案是设置一个布尔变量并在显示对话框之前检查它.所以第二次,它不会显示.这一切都很好,但是当用户取消时,仍然会设置变量.因此,下次用户想要离开页面时,对话框将不再显示. 希望这有点清楚,我希望有人找到解决办法吗?

解决方法

对annakata的反应:是的,但您希望浏览器使用对话框的结果.所以你可能会认为使用’return bFlag’可以做到这一点(或者event.returnValue = bFlag),但这会给你一个第二个对话框.
感谢 this page,我找到了一条路.实际上很简单:
var onBeforeUnloadFired = false;

在这里使用此全局变量:

if (!onBeforeUnloadFired) {
    onBeforeUnloadFired = true;
    event.returnValue = "You'll lose changes!";
}
window.setTimeout("ResetonBeforeUnloadFired()",1000);

然后实现该功能:

function ResetonBeforeUnloadFired() {
    onBeforeUnloadFired = false;
}

因此,实际上,使用标志,但如果用户单击取消,则重置它.不完全是我想要的,但没有找到更好的东西.

a标签href属性值对onbeforeunload事件的影响

a标签href属性值对onbeforeunload事件的影响

背景

在某些场景下,我们希望点击a标签以后不做跳转,并且能响应a标签绑定的事件,常见方法href设置javascript:;、#### 等,但经测试发现,这几种方式在chrome,ie9上对onbeforeunload事件的触发不一致,这里做个测试和总结。

示例代码

示例代码里对几种不同的方式在chrome,ie下作了测试。
-- chrome版本:版本 58.0.3029.110
-- ie版本:9.0.8112

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            .container {
                margin-bottom: 64px;
            }
            .content {
                height: 2000px; /*设置一个比较高的高度,使页面出现滚动条*/
                background: #f0f0f0;
            }
            .item {
                margin-top: 12px;
            }
        </style>
    </head>

    <body>
        <div>
            <div>
                测试a标签
            </div>
            <div>
                <div><a href="javascript:void(0);" >test1-使用void</a> </div>
                <div><a href="javascript:;" >test2-使用javascript:;</a> </div>
                <div><a href="####" >test3-使用####</a></div>
                <div><a href="#">test4-使用#</a></div>
                <div><a>test5-不加href属性</a></div>
                <div><a href="">test6-href属性值为空</a></div>
                   <div><a href="tel:18822222222">test7-打电话</a></div>
                <div><a href="mailto:xxx@163.com">test8-发邮件</a></div>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        window.onbeforeunload = function(e) {
            e.returnValue = '''';
        }
    </script>
</html>

结论

比较.png

1.使用href="" 与使用href="#" 效果是一样的,都会滚动到页面顶部
2.a标签不加href属性,不会具有a标签的性质(hover手形,下划线),但可以用css加上标签的默认样式
3.对onbeforeunload的触发情况:

  • chrome下,href="" 、href="tel"、href="mailto" 都会触发onbeforeunload事件

  • ie下:javascript:void(0); javascript:; href="" 都会触发onbeforeunload事件
    so,

4.在希望点击a标签以后不做跳转,并且能响应a标签绑定的事件,而页面绑定了onbeforeunload事件,href="####", 以及不设置href属性这两种方式是安全的。(href="#"会有页面滚动到顶部的效应)

5.但是,如果使用了javascript:;的方式,可以在a标签的响应事件里加上,return false; 或者e.preventDefault() 来解决ie9下频繁弹出页面离开提示的问题

Reference

1.onebeforeunload is too enthusiastice in ie9 https://stackoverflow.com/que...

beforeunload事件

beforeunload事件

window.addEventListener("beforeunload", function (e) {
            var confirmationMessage = "\o/";

            (e || window.event).returnValue = confirmationMessage;     // Gecko and Trident
            return confirmationMessage;                                // Gecko and WebKit
        });

 

 

从2011年5月25号开始,HTML5规范指出在此事件处理函数中,对于window.alert()window.confirm(), 和 window.prompt() 的调用会被忽略。详见HTML5规范说明。

同样需要注意的是许多手机浏览器会忽略该事件处理的返回值(亦即,它们不会要求用户确认,而是直接执行操作)Firefox在about:config中有一个隐藏的设置来做同样的事。其实就是用户确认文档总会被卸载。

 经常会有一些在用户离开页面前执行一些业务的应用场景,这都要用到onbeforeunload事件

Firefox中beforeunload事件的实现缺陷浅析_javascript技巧

Firefox中beforeunload事件的实现缺陷浅析_javascript技巧

beforeunload 指在页面卸载前提供的最后一次JS执行的机会。如下

复制代码 代码如下:

window.onbeforeunload = function() {
return ''您正在编辑的博客尚未保存,确定要离开此页吗?'';
};

可以使用返回值文字来提示用户。但只有Firefox中却不显示该文字。
当刷新页面时,各浏览器表现如下

IE:

Chrome:

Firefox12:

Mozilla官方说Firefox4之前的版本可以通过事件对象的returnValue修改该值,如下
复制代码 代码如下:

window.onbeforeunload = function(e) {
e = e || window.event;

// For IE and Firefox prior to version 4
if (e) {
e.returnValue = ''Any string'';
}
return ''您正在编辑的博客尚未保存,确定要离开此页吗?'';
};

相关:
https://developer.mozilla.org/en/DOM/window.onbeforeunload
https://bugzilla.mozilla.org/show_bug.cgi?id=588292

今天关于如何获取onbeforeunload事件的目标URL?获取事件指令的讲解已经结束,谢谢您的阅读,如果想了解更多关于ASP.NET linkbutton两次提高onBeforeUnload事件、a标签href属性值对onbeforeunload事件的影响、beforeunload事件、Firefox中beforeunload事件的实现缺陷浅析_javascript技巧的相关知识,请在本站搜索。

本文标签:

上一篇科东软件加入 openKylin,共推社区繁荣发展!(科东软件技术有限公司)

下一篇Python-JSON转换为Pandas DataFrame(python json转化)