多窗口页面实现之window.open和iframe

复杂的项目开发，是避免不了多窗口的window.open使用和iframe的使用的，如下简单介绍这两种多窗口页面实现方式：

 

1、window.open方法

open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。

语法：

window.open(URL,target,specs,replace)

参数：

URL:  可选。打开指定的页面的URL。如果没有指定URL，打开一个新的空白窗口。

target:  可选。指定target属性或窗口的名称。支持以下值：

specs(abbr: specifications,规格、说明书）:  可选。一个逗号分隔的项目列表。支持以下值： width=pixels,height=pixels,fullscreen=yes|no|1|0 ......

replace:规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。

 

用法一：在当前浏览器打开一个新的窗口

 window.open("http://www.runoob.com");
等价于：
超链接<a href="//www.jb51.net" title="脚本之家" target="_blank">Welcome</a>

用法二：在一个新的浏览器打开一个新的窗口

    myWindow=window.open('','','width=200,height=100');
    myWindow.document.write("<p>这是'我的窗口'</p>");
    myWindow.focus();

 

2、iframe标签

<iframe> 标签规定一个内联框架。

一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。这个文档可以是HTML文档，IMG等资源。

iframe 用于在网页内显示网页。

所有主流浏览器都支持 <iframe> 标签。

您可以把需要的文本放置在 <iframe> 和 </iframe> 之间，这样就可以应对不支持 <iframe> 的浏览器。

通常我们使用iframe直接直接在页面嵌套iframe标签指定src就可以了。

 

iframe 的优缺点

优点：

　　重载页面时不需要重载整个页面，只需要重载页面中的一个框架页（减少数据的传输，减少网页的加载时间）；

　　技术简单，使用方便，主要应用于不需要搜索引擎来搜索的页面；

　　方便开发，减少代码的重复率（比如页面的header，footer）；

缺点：

　　会产生很多的页面，不易于管理；

　　不易打印；

　　多框架的页面会增加服务器的http请求；

　　浏览器的后退按钮无效等；