• 有道JavaScript监听浏览器的问题(附一解决方案)



    相信大家在web项目中,经常会用到javascript的事件监听、事件冒泡这些东西。当然也包括window.opener,window.showModalDialog这些父子窗口的互操作。 

    但不知道大家有没遇到这样一种情况,新开的窗口是通过<a href="" />打开 的,而不是window.opener或showModalDialog打开的。 

    尤其是需要注意的是:这个href指向的地址(页面)不是我们开发的,譬如,我们将href指向www.cnblogs.com。

    OK,问题来了:假如我们在a 所在的页面有个按钮,可以触发点击事件并进行一些操作。 而这个点击事件需要在href打开的IE窗口关闭后触发。。。 

     这个时候,我们如何监视href打开的窗口呢?(通过javascript,不要说什么进程啥的东东).

     假设有a.html如下:

       1 

     2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     3 <html xmlns="http://www.w3.org/1999/xhtml">
     4  <head>
     5   <title> a.html </title>
     6   <meta name="generator" content="editplus" />
     7   <meta name="author" content="" />
     8   <meta name="keywords" content="" />
     9   <meta name="description" content="" />
    10  </head>
    11 
    12  <body>
    13    <input type="button" id="btnParent" onclick="alert('a');" value="Click !" />
    14    <href="http://www.cnblogs.com" target="_blank">Link to B.HTML</a>  
    15  </body>
    16 </html>

     现在的要求就是:点击 "Link to B.HTML" 打开http://www.cnblogs.com。

                           打开的新窗口关闭后,触发a.html中的  btnParent 的点击事件~~~~

    ---

        我相信很少有人做过这样的应用,或碰到这样的问题。 而我现在刚好碰到这样一个需求。

        因此将问题发到这里来,让大家帮忙给揣摩揣摩。

        虽然文章内容很少,但我想,这样一个问题还是值得上首页的。~~~^_^  

    -------------------------------

    终于有高人提到了用window.closed这个属性来判断新开的窗口是否关闭(并用setInterval来实现监听的效果)。而且window.closed是可以跨域的。

    (个人认为:打开的新窗口返回的window对象与窗口中的window对象是两个东西,读取后者会存在跨域问题,而前者是本地的东西) 

    当然,要使用window.closed这个东西,我们还得先获取window对象,由于需要是新开窗口,因此我们可以用window.open。下面是具体实现代码:

    ( 可以移步keyapril同学的回复处查看)

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5 <title>无标题文档</title>
     6 <script type="text/javascript">
     7 var $=function()
     8 {
     9     if(!arguments || arguments.length!=1)
    10     {
    11         throw new Error('the arguments is needed');
    12     }
    13     if(typeof arguments[0=== 'string' )
    14     {
    15       return document.getElementById(arguments[0]);
    16     }
    17     if(typeof arguments[0=== 'function' )
    18     {        
    19         if(window.addEventListener)
    20         {
    21             window.addEventListener('load',arguments[0],false);
    22         }
    23         if(window.attachEvent)
    24         {
    25             window.attachEvent('onload',arguments[0]);
    26         }
    27     }
    28 }
    29 $(function(){
    30     $('a1').onclick=function(event)
    31     {
    32         var e = event || window.event;
    33         var newW=window.open(this.href);
    34         var inter=window.setInterval(function(){
    35             if(newW.closed){
    36                 window.clearInterval(inter);
    37                 $('btn1').click();
    38             }
    39         },100);
    40         
    41         return false;
    42     }
    43     $('btn1').onclick=function(event)
    44     {
    45         var e=event || window.event;
    46         alert('the window is closed!');
    47     }
    48 });
    49 </script>
    50 </head>
    51 
    52 <body>
    53 <input type="button" id="btn1" value="Click" />
    54 <id="a1" href="http://www.cnblogs.com">link </a>
    55 </body>
    56 </html>
    57 

     

    -------------------------------  

    <h3>
       心静似高山流水不动,心清若巫峰雾气不沾。
    </h3>
  • 相关阅读:
    C#冒泡排序--详解
    盘古搜索--实例解析
    ajax提交表单序列化(serialize())数据
    随机数大揭秘
    静态代码块(主要是注意执行顺序)
    单例模式
    递归
    vue路由嵌套(邹文丰)
    vue computed和 methods、 watch 区别(邹文丰)
    vuex状态管理mutations,getters,actions总结(邹文丰)
  • 原文地址:https://www.cnblogs.com/McJeremy/p/1762413.html
Copyright © 2020-2023  润新知