JavaScriptBOM - open/sub和sup / 开普饭

window的open方法

window.open();

参数：

1.要加载的url

2.窗口的名称或者窗口的目标

3.设置窗口大小的语句

举个小例子：

我们这有个按钮，当我们来调用这个按钮，来看一下效果

<head> <metacharset="utf-8"> <title></title> <script type="text/javascript"> window.onload =function(){var oBtn =document.getElementById("btn"); oBtn.onclick= function(){ window.open("http://www.baidu.com"); } } </script></head><body> <input type="button" value="按钮"id="btn" /></body>

运行效果如下，点击按钮就会在新的窗口弹出百度界面：

以上是只有第一个参数时

当我们添加了第二个参数时

点击按钮只会出现一个新窗口

并不会像之前一样点一次出现一次窗口

<head> <metacharset="utf-8"> <title></title> <script type="text/javascript"> window.onload =function(){var oBtn =document.getElementById("btn"); oBtn.onclick= function(){ window.open("http://www.baidu.com",”百度”); } } </script></head><body> <input type="button" value="按钮"id="btn" /></body>

我们再来添加第三个参数

控制打开新窗口的大小

例如：

<script type="text/javascript"> window.onload =function(){var oBtn =document.getElementById("btn"); oBtn.onclick= function(){ window.open("http://www.baidu.com","百度","width=400,height=400,top=200,left=200"); } } </script> </head> <body> <input type="button" value="按钮"id="btn" /> </body>

运行效果如下：

sub和sup

sup父窗口; sub子窗口

我们通过一个例子来了解一下sub和sup：

同意文件下新建两个网页文件为sup.html和sub.html

1.在sup中，我们用open来打开sub.html

2.在sub中通过opener打开当前窗口父窗口的window对象

sup中的代码：

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><style>body{background-color: blue;}</style><script>window.onload =function(){var oBtn =document.getElementById("btn"); oBtn.onclick= function(){ open("sub.html","子窗口","width=400,height=400,top=200,left=200") } }</script></head><body><inputtype="button" value="打开子窗口"id="btn" /></body></html>

sub中的代码：

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><style>body{background-color:yellow;}</style><script>window.onload =function(){var oBtn =document.getElementById("btn"); oBtn.onclick= function(){//alert(opener); opener.document.write("666666"); } }</script></head><body><inputtype="button" value="按钮"id="btn" /></body></html>

我们来运行sup.html，点击按钮时就会打开sub.html子网页

运行结果如下：

- 写作不易，大家多多关注，谢谢啦 -

---web分享，分享的不只是web

JavaScriptBOM - open/sub和sup

相关推荐

JavaScriptBOM操作

JavaScriptBOM - 初始和open方法