使用onbeforeunload属性后的副作用

在使用博客园的编辑器编辑文章时，有一个挺体贴用户的功能，就是如果用户进入编辑器后，不是执行"POST"操作而要退出当前编辑器页面，我们会得到一个Alert窗口提示（如下图）。这个功能其实很简单，就是通过处理window、body或frameset对象或元素的onbeforeunload事件实现的。

这个unbeforeunload的具体用法我就不说了，反正几乎能引起当前页面发生跳转的任何动作，都会触发这个事件。并且它先于unload事件被触发，如果在其的事件处理函数里面向event.returnValue属性赋值非空字符串，就会出现一个如上图的窗口（代码如下）。

window.onbeforeunload = function ()
{
    // . . .  
    event.returnValue = "You will lose any unsaved content";
    // . . .    
}

至于这个窗口是做什么用的，窗口上系统提示的文字（第1行和第3行）已经说的非常清楚了。那么使用这个事件到底有什么问题呢？

我们知道引起当前页面发生条转主要3类事件：
    1、对浏览器窗口的操作，比如关闭浏览器、go home、backward、forward和refresh等；
    2、对于网页的Navigatie操作，比如点击链接、在地址栏中执行新的地址、页面表单提交到非当前页面等；
    3、脚本代码引起的页面Navigate操作，比如执行navigate、locatoin方法(replace, reload, assign)和修改location属性(href, search)等。

以上的1-2类操作引起onbeforeunload的事件，使用起来基本没有任何的问题，可是执行第3类页面条转操作却有点小问题。就是在上图的窗口出现后，如果点选"OK"，确实就OK，页面正确跳转了。可是如果这个时候，我们点选"Cancel"，却会出现一个脚本异常，如下图：

解决方法就是把脚本调用try一下，但这似乎是IE的一个bug的说。

try
{
    //   
    event.returnValue = "You will lose any unsaved content";
    //   
}
catch(e){}

赞 (0)

相关推荐

  • onbeforeunload与onunload事件异同点总结

    1)异同点 相同点:onunload,onbeforeunload都是在刷新或关闭时调用,可以在<script>脚本中通过window.onunload来指定或者在<body>里指定. 不同点: a)onbeforeunload在onunload之前执行 ,它还可以阻止onunload的执行. b)onbeforeunload是正要去服务器读取新的页面时调用,此时还没开始读取;nunload则已经从服务器上读到了需要加载的新的页面,在即将替换掉当前页面时调用 . c)onbefor

  • 判断用户的在线状态 onbeforeunload事件

    获得用户登陆状态不用说了,判断离开的话就有一点问题了,如果说用户都是按照设计者的规定触发退出事件离开的话那就没什么难度了,但是用户的离开方式多种多样,怎么在用户非法离开的时候即时的判断离开呢?最常见的非法离开就是关闭浏览器了. 复制代码 代码如下: <BODY onbeforeunload="body_onUnload()"> <script> window.onbeforeunload = function() { if (window.event.clien

  • window.onbeforeunload方法在IE下无法正常工作的解决办法

    事件的起因是由于在工作中有客户反映,常常会有用户在浏览网页的过程中订购了商品,但是由于用户一下子打开的窗口过多,又或者在敲打键盘时,错误地按到了F5键,导致页面刷新或者不正常关闭,而这时在该网页上所做的一切操作的信息都丢失了,如果我们可以提供一个在客户信息未处理完成时的提示那该多好啊,下面的代码可以做到不管用户是点击了关闭,或者是在任务栏关闭.点击后退.刷新.按F5键,都可以检测到用户即将离开的消息. 复制代码 代码如下: <script type="text/javascript&quo

  • 关闭浏览器时提示onbeforeunload事件

    onbeforeunload事件 它是这样用的: 复制代码 代码如下: <script language="javascript">      g_blnCheckUnload = true;      function RunOnBeforeUnload() {              if (g_blnCheckUnload) {        window.event.returnValue = 'You will lose any unsaved content'

  • 使用onbeforeunload属性后的副作用

    使用onbeforeunload属性后的副作用

    在使用博客园的编辑器编辑文章时,有一个挺体贴用户的功能,就是如果用户进入编辑器后,不是执行"POST"操作而要退出当前编辑器页面,我们会得到一个Alert窗口提示(如下图).这个功能其实很简单,就是通过处理window.body或frameset对象或元素的onbeforeunload事件实现的. 这个unbeforeunload的具体用法我就不说了,反正几乎能引起当前页面发生跳转的任何动作,都会触发这个事件.并且它先于unload事件被触发,如果在其的事件处理函数里面向event.r

  • 快速解决js动态改变dom元素属性后页面及时渲染的问题

    今天实现一个进度条加载过程,dom结构其实就是两个div <div class="pbar"> <div class="ui-widget-header" id="percent_bar" style="width: 23%;"></div> </div> 控制里层div的宽width属性,就能实现进度条往前走的效果. 我的进度条是显示下载文件的进度,简单实现一共100个文件的话

  • C# ComboBox控件“设置 DataSource 属性后无法修改项集合”的完美解决方法

    由于毕业后工作没有对接到专业问题,导致四五年没有碰过Winform程序了.突然由于工作问题,为了方便自己,所以想自己写写小winform小软件,用于自己使用.在使用ComboBox控件时,遇到了重新绑定赋值出问题的情况. 错误代码如下: if (CustomerBLL.select().Rows.Count > 0) { cbTcid.Items.Clear(); cbTcid.DataSource = CustomerBLL.select(); cbTcid.ValueMember = "

  • 解决vue 更改计算属性后select选中值不更改的问题

    先上代码: //... <body> <div id="qwe"> <select v-model="selected"> <option v-for="item in da" :value="item.value">{{item.value}}</option> </select> <span>{{selected}}</span>

  • C#ComboBox控件“设置 DataSource 属性后无法修改项集合”的解决方法

    在使用ComboBox控件时,遇到了重新绑定赋值出问题的情况.正常情况下,对于数据重新赋值的或者绑定数据源的时候,为了防止数据出现问题,都会先清空原来数据,所以就这样写了,但是没有相当恰恰这样写就出现问题了. 于是在网上找了一下.发现有人是这样操作的.灵感突现,再清除下拉列表项的时候首先将ComboBox.DataSource付空值"null",问题果然就迎刃而解了. if (combo_Area.Items.Count > 0) { combo_Area.DataSource

  • vue修改对象的属性值后页面不重新渲染的实例

    最近项目在使用vue,遇到几次修改了对象的属性后,页面并不重新渲染,场景如下: HTML页面如下: <template v-for="item in tableData"> <div :class="{'redBorder':item.red}"> <div>{{ item.name}}</div> <div> <el-button size="mini" @click="

  • JScript中的prototype(原型)属性研究第1/2页

    我们使用prototype属性提供对象的类的一组基本功能.并且对象的新实例会"继承"赋予该对象原型的操作.但是这个prototype到底是怎么实现和被管理的呢? 对于对象的prototype属性的说明,JScript手册上如是说:所有 JScript 内部对象都有只读的 prototype 属性.可以向其原型中动态添加功能(属性和方法),但该对象不能被赋予不同的原型.然而,用户定义的对象可以被赋给新的原型. 下面我们看三个经典的prototype属性的使用示例. 1.为脚本环境内建对象

  • Vue3 源码解读之副作用函数与依赖收集

    Vue3 源码解读之副作用函数与依赖收集

    目录 副作用函数 副作用函数的全局变量 targetMap targetMap 为什么使用 WeakMap activeEffect shouldTrack 副作用的实现 effect 函数 ReactiveEffect 类 track 收集依赖 track 函数 trackEffects 函数 trigger 派发更新 trigger 函数 triggerEffects 函数 总结 版本:3.2.31 副作用函数 副作用函数是指会产生副作用的函数,如下面的代码所示: function effe

  • Vue3 计算属性computed的实现原理

    目录 computed 的函数签名 computed 的实现 ComputedRefImpl 类 总结 版本:3.2.31 computed 的函数签名 // packages/reactivity/src/computed.ts // 只读的 export function computed<T>( getter: ComputedGetter<T>, debugOptions?: DebuggerOptions ): ComputedRef<T> // 可写的 ex

  • 从零开始学习jQuery (四) jQuery中操作元素的属性与样式

    从零开始学习jQuery (四) jQuery中操作元素的属性与样式

    一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得大家学习. 二.前言 通过前面几章我们已经能够完全控制jQuery包装集了, 无论是通过选择器选取对象, 或者从包装集中删除,过滤元素. 本章将讲解如何使用jQuery获取和修改元素属性和样式. 三. 区分DOM属性和元素属性 一个img标签: <img src="images/image.1.jpg" id="hibiscus" alt="

随机推荐