多页面共用子窗口技术
2009-10-27 21:18
405 查看
这是来自论坛上的一个问题,问题要求多个不同的页面,在打开子页面时,要共用同一个窗口,并且子窗口不能刷新。这跟google音乐里面的添加音乐,然后播放的效果类似。因为在播放音乐的时候,如果子页面刷新了,那么音乐必须从头来播放,自然效果不尽人意。类似的情况也会出现在视频的网站上。
下面,我们使用简单的Javascript代码来实现这一功能。本代码在目前所有主流浏览器里测试通过。
下面,先创建一个测试主页面,Test1.htm
XML/XHTML 代码
接下来,创建WinA.htm
XML/XHTML 代码
接下来是WinB.htm
XML/XHTML 代码
WinC.htm
XML/XHTML 代码
WinD.htm
XML/XHTML 代码
然后可以创建多个测试用的页面Test2.htm
XML/XHTML 代码
在不同的窗口里,打开测试页面,则,都会将内容显示在Window B所在的主体窗口内。并且页面是不刷新的。其原理就是将新开的页面在隐藏的窗口里打开,然后取出来传递的参数,使用javascript来进行数据的传递。其中窗口WinD.htm中的脚本不能少,而且是很关键的地方。
以上代码有点绕,希望没有把读者绕糊涂了。^_^
下面,我们使用简单的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中的脚本不能少,而且是很关键的地方。
以上代码有点绕,希望没有把读者绕糊涂了。^_^
相关文章推荐
- 多页面共用子窗口技术,如音乐播放器【转自CSDN:net_lover】
- 多页面共用子窗口技术(转)
- 牛腩新闻发布系统之技术篇(四)——.aspx页面弹出窗口
- PB中数据窗口的精确页面打印技术
- easyui中window窗口自定义重新分装,用于iframe子页面弹框,解决多页面共用同一弹框页面问题
- 【技术】iOS可禁止用户在新窗口打开页面
- 前台页面技术之引用 js 与css 方法
- php生成静态html页面缓存技术原理+实例
- js父子窗口传值以及当前页面在js前台如何获得url参数
- ASP.NET 缓存:方法和最佳实践 页面缓存技术(Cache、XML)
- 关于ASP.NET页面打印技术的总结【转】
- 如何点击按钮弹出新窗口,输入数据后返回并刷新页面?
- MVC(BundleConfig) 压缩捆绑技术,减少页面请求,优化客户体验。
- 让IE 在同一窗口中新选项卡中打开新页面
- echarts学习总结(二):一个页面存在多个echarts图形,图形自适应窗口大小
- 自动刷新页面技术
- 阻止shift+click页面超链接打开新窗口
- javascript取窗口的可视高度和页面的内容高度 兼容所有浏览器
- 浅谈Ajax技术实现页面无刷新
- 关于ASP.NET页面打印技术的总结