多页面共用子窗口技术（转）

最新推荐文章于 2021-08-30 17:07:05 发布

weixin_30672295

最新推荐文章于 2021-08-30 17:07:05 发布

阅读量59

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/n666/archive/2010/01/05/2190968.html

版权

原文作者【孟子E章】

这是来自论坛上的一个问题，问题要求多个不同的页面，在打开子页面时，要共用同一个窗口，并且子窗口不能刷新。这跟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/n666/archive/2010/01/05/2190968.html

weixin_30672295

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
多页面共用子窗口技术（转）

原文作者【孟子E章】这是来自论坛上的一个问题，问题要求多个不同的页面，在打开子页面时，要共用同一个窗口，并且子窗口不能刷新。这跟google音乐里面的添加音乐，然后播放的效果类似。因为在播放音乐的时候，如果子页面刷新了，那么音乐必须从头来播放，自然效果不尽人意。类似的情况也会出现在视频的网站上。下面，我们使用简单的Javascript代码来实现这一功能。本代码在目前所有主流浏览器里测试通过。...
复制链接

扫一扫