监听 Flex 页面的后退/前进/刷新/关闭

最新推荐文章于 2021-03-31 18:09:13 发布

原创最新推荐文章于 2021-03-31 18:09:13 发布 · 126 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Flex #JavaScript #IE #ActionScript #Web #ViewUI

Flex 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一种使用JavaScript结合ActionScript的方法，防止Flex应用的web页面在浏览器中被意外地后退、前进、刷新或关闭。通过在HTML文件中设置onbeforeunload和onunload事件，并在Flex应用程序中添加回调函数，可以实现对用户操作的确认提示。

我们知道 Flex 做的 web 页面在整个程序中只有一个 url, 当我们按了 IE 上的后退/前进/刷新/关闭时就会退出到第一次 load 时的页面，重新加载过。

在网上搜过很多,利用Javascript并不能实现屏蔽 IE 的后退/前进/刷新/关闭各功能。
在朋友介绍的一个网站https://www.photoshop.com当你登录后就会监听IE 的后退/前进/刷新/关闭各功能，提示是否要执行。看了这个网站的原代码，再在网上搜了一下，终于发觉他是怎样实现的(原文：http://flexblog.faratasystems.com/?m=20061217)。

通过javascript 的 onbeforeunload 和 onunload 事件与 ActionScript 的addCallback方法 (如下边的“getUnsavedDataWarning();”方法)来实现监听：

1. 在 index.template.html 中增加javascript

<script language=”JavaScript” type=”text/javascript”>    
//-------------------------------------------------------------------------------------------    
// Specifies a function for the window's onbeforeunload event    
// Call back to the getUnsavedDataWarning in our Flex app when the browser is about to unload    
//-------------------------------------------------------------------------------------------    
//window.onbeforeunload = function()    
   
window.onbeforeunload = onbeforeunload_handler;    
function onbeforeunload_handler()    
{    
     var warning="";    
     var fxControl = document.${application} || window.${application};    
    if ( fxControl )    
        if ( typeof fxControl.getUnsavedDataWarning=="function")    
             warning = fxControl.getUnsavedDataWarning();    // This calls a function in our Flex app    
        
    if ( warning != '' )    
        return warning;    
    else    
        return void(0);    
}    
   
   
//-------------------------------------------------------------------------------------------    
// Specifies a function for the window's onunload event    
// Call back to the javascriptOnUnload in our Flex app when the browser unloads    
//-------------------------------------------------------------------------------------------    
window.onunload = function()    
{    
     var fxControl = document.${application} || window.${application};    
    if ( fxControl )    
        if ( typeof fxControl.javascriptOnUnload=="function")    
            fxControl.javascriptOnUnload();  // This calls a function in our Flex app    
}    
</script>

2.在 Flex 的 application 页面里加增一个addCallback, 在页面加载完后就addCallback:

private const UNSAVED_DATA_WARNING:String = 'You have unsaved changes. You will lose them if you continue.';       
                   
    private function onCreationComplete():void {       
         ExternalInterface.addCallback("getUnsavedDataWarning",       
             function():String {       
                return UNSAVED_DATA_WARNING;       
             }       
         );       
     }

这样就可以防止 Flex 页面的意外后退/前进/刷新/关闭了。