多页面共用子窗口技术

转自：http://blog.csdn.net/net_lover/article/details/4735224

这是来自论坛上的一个问题，问题要求多个不同的页面，在打开子页面时，要共用同一个窗口，并且子窗口不能刷新。这跟google音乐里面的添加音乐，然后播放的效果类似。因为在播放音乐的时候，如果子页面刷新了，那么音乐必须从头来播放，自然效果不尽人意。类似的情况也会出现在视频的网站上。

下面，我们使用简单的Javascript代码来实现这一功能。本代码在目前所有主流浏览器里测试通过。

下面，先创建一个测试主页面，Test1.htm

XML/XHTML 代码

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
   < title ></ title >
   < script  type ="text/javascript" >
    function winOpen() {
      window.open("winA.htm?music=From_Test1_" + (new Date()).toLocaleString(), "mxh", "width=600,height=300")
    }
   </ script >
</ head >
< body >
   < input  type ="button"  onclick ="winOpen()"  value ="打开子窗口"   />
</ body >
</ html >

接下来，创建WinA.htm

 

XML/XHTML 代码

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
   < title > Window A </ title >
</ head >
< body >
< h1 > 这里是Window A </ h1 >
< script  type ="text/javascript" >
  if (window.location.href == window.top.location.href) {
    self.top.location.href = "winB.htm" + window.location.search
  }
  else {
    window.parent.frames["mxh2"].setMusic(window.location.search.substr(1))
  }
</ script >
</ body >
</ html >

接下来是WinB.htm

XML/XHTML 代码

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
     < title > Window B </ title >
</ head >
< body >
< iframe  name ="mxh2"  src ="winC.htm"  style ="width:600px;height:400px;"  frameborder ="0" ></ iframe >
< iframe  name ="mxh"  src ="winD.htm"  style ='display:none' ></ iframe >
< script  type ="text/javascript" >
  alert("页面刷新检测器")
</ script >
</ body >
</ html >

WinC.htm

XML/XHTML 代码

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
   < title > Window C </ title >
</ head >
< body >
< div  id ="showContent" > 初始化的内容 </ div >
     < script  type ="text/javascript" >
      function setMusic(str) {
        document.getElementById("showContent").innerHTML += " < br /> " + str
      }
     </ script >
</ body >
</ html >

WinD.htm

XML/XHTML 代码

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
   < title > Window D </ title >
</ head >
< body >
   < script  type ="text/javascript" >
    window.name = "mxh";
    window.top.name = "";
    window.top.focus();
   </ script >
</ body >
</ html >

然后可以创建多个测试用的页面Test2.htm

XML/XHTML 代码

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
   < title ></ title >
   < script  type ="text/javascript" >
    function winOpen() {
      window.open("winA.htm?music=From_Test2_" + (new Date()).toLocaleString(), "mxh", "width=600,height=300")
    }
   </ script >
</ head >
< body >
   < input  type ="button"  onclick ="winOpen()"  value ="打开子窗口"   />
</ body >
</ html >

在不同的窗口里，打开测试页面，则，都会将内容显示在Window B所在的主体窗口内。并且页面是不刷新的。其原理就是将新开的页面在隐藏的窗口里打开，然后取出来传递的参数，使用javascript来进行数据的传递。其中窗口WinD.htm中的脚本不能少，而且是很关键的地方。

转载于:https://www.cnblogs.com/wifi/articles/3523576.html