跨瀏覽器通信即指在同一客戶端打開同一站點的兩個不同頁面之間的通信.我們一般的做法是,通過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>
<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>
"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>