zoukankan      html  css  js  c++  java
  • 简单跨浏览器通信.

      跨瀏覽器通信即指在同一客戶端打開同一站點的兩個不同頁面之間的通信.我們一般的做法是,通過window.open得到一個句柄來在兩個遊覽器之間進行操作,如window.parent,window.opener,ReturnValue等來獲取窗口的引用或值.只有存在這樣關係的兩個窗口才能建立這种通信.這里要介紹的是通過讀取客戶端的cookie來完成之間,我的思路也來自9sky.com,它那里的代碼比較詳盡,我只做簡單的原理分析.
        假設通信的兩個遊覽器分別是A和B,我們要做到的是A遊覽器做一個動作時(有變化)會触動B遊覽器發生變化(A,B沒有open之類的關系).
    這里我們可以把A窗口的變化寫進cookie,而B窗口里寫一個方法,每隔一段時間(2s,9sky.com)去讀去cookie的值,如有變化就focus,并重新更新頁面(9sky的操作是刷新頁面).剛開始還以為很難,其實原理很簡單.
        操作的方法里涉及設置、獲取、刪除cookie.
        以下是我的一些代碼.
        A窗口的代碼.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>A</title>
    <script language="javascript">

    function setCookie(sName, sValue, iTime,sDomain,sPath,sDomain,bSecure){
       
    var date = new Date();
       date.setTime(date.getTime()
    +iTime*1000);
       
    var sCookies=escape(sName) + "=" + escape(sValue) + "; expires=" + date.toGMTString();   
       
    if(sPath)
        sCookies
    +=";path="+sPath;
        
    if(sDomain)
        sCookies
    +=";domain="+sDomain;
        
    if(bSecure)
        sCookies
    +=";secure";
       document.cookie 
    = sCookies;
    }

    function setc(ddx)
    {
        
    // var date = new Date();
      // date.setTime(date.getTime()+6000000);
      var isWin=GetCookie("open");
          
    if(isWin==null || isWin!="t")
            window.open(
    "test.htm");
        setCookie(
    "myname",ddx.value,60);
    }

    function GetCookie(sName)
    {
    // cookies are separated by semicolons
    var aCookie = document.cookie.split("");
    for (var i=0; i < aCookie.length; i++)
    {
    // a name/value pair (a crumb) is separated by an equal sign
    var aCrumb = aCookie[i].split("=");
    if (escape(sName) == aCrumb[0])
    return unescape(aCrumb[1]);
    }

    // a cookie with the requested name does not exist
    return null;
    }

    function trace(){
       document.getElementById(
    "div1").innerHTML = document.cookie;
    }

    </script>
    </head>
    <body>
    <form name="form1" method="post"  >
       
    <p>
        
    <input type="text" name="cook" id="cook">
        
    <br><div id="div1"></div>
    </p>
      
    <p>
        
    <input type="button" name="Submit" value="設置cookie" onClick="setc(document.all('cook'));trace();">
        
    <input type="button" name="Submit" value="得到cookie" onClick="alert(document.cookie.length)">
    </p>
    </form>
    </body>
    </html>

        B窗口的代碼:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd"
    >
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script>
    window.name
    ="haha";
    // 獲取cookie值
    function GetCookie(sName)
    {
    // cookies are separated by semicolons
    var aCookie = document.cookie.split("");
    for (var i=0; i < aCookie.length; i++)
    {
    // a name/value pair (a crumb) is separated by an equal sign
    var aCrumb = aCookie[i].split("=");
    if (sName == aCrumb[0])
    return unescape(aCrumb[1]);
    }

    // a cookie with the requested name does not exist
    return null;
    }

    //設置cookie
    function setCookie(sName, sValue, iTime,sDomain,sPath,sDomain,bSecure){
       
    var date = new Date();
       date.setTime(date.getTime()
    +iTime*1000);
       
    var sCookies=escape(sName) + "=" + escape(sValue) + "; expires=" + date.toGMTString();   
       
    if(sPath)
        sCookies
    +=";path="+sPath;
        
    if(sDomain)
        sCookies
    +=";domain="+sDomain;
        
    if(bSecure)
        sCookies
    +=";secure";
       document.cookie 
    = sCookies;
    }

    setCookie(
    "open","t",864000);
    function myunload()
    {
        setCookie(
    "open","t",-1);//刪除cookie "open"
    }

    //刪除cookie
    function DelCookie(sName,sValue)
    {
    document.cookie 
    = escape(sName) + "=" + escape(sValue) + "; expires=Fri, 31 Dec 1999 23:59:59 GMT;";
    }


    function getdd()
    {
        
        
    var aCookie = document.cookie.split("");
        
    //if(aCookie.length>0)
        //alert(aCookie[0]);
        var mname=GetCookie("myname");
        
    var date=new Date();
        date.setTime(date.getTime()
    -1000);
        
    if(mname!=null && mname!="#")
        
    {  
            window.focus();
            window.alert(mname);
    //從A窗口傳過來的值
            //setCookie("myname", "#",date)
            DelCookie("myname",mname);
            
        }
             
        
        setTimeout(getdd, 
    2000);//兩稱讀取一次
    }

    </script>
    <title>B</title>
    </head>
    <body onUnload="myunload()">
    <script>
    getdd();
    </script>
    </body>
    </html>
    人若是太幸运,则不知天高地厚,也不知自己能力究竟有多少。
  • 相关阅读:
    拖拽 上传文件
    复制文本消息
    zTree 显示为‘aa’,当选择aa时,传的参数为‘22’
    移动端 动画 启动硬件加速
    jquery 停止动画与切换
    CSS小技巧-怎样让每行多余的文字显示文省略号?
    CSS小技巧-两个盒子之间的间距问题
    CSS小技巧-为内盒子添加margin-top时,会带着父盒子一起下来,如何解决?
    小K的H5之旅-CSS基础(一)
    小K的H5之旅-HTML的基本结构与基本标签
  • 原文地址:https://www.cnblogs.com/Tomasyang/p/communfor2.html
Copyright © 2011-2022 走看看