多窗口页面实现之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请求;

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

猜你喜欢

转载自blog.csdn.net/LavanSum/article/details/81027369
今日推荐