window.open和window.close的使用详解

2020-11-28 03:11

阅读：625

YPE html>

标签：blog class code c java tar

有时候，我们想通过JS实现一个的新开标签的效果，此时我们想到了window.open方法实现。那么window.open到底应该怎么使用呢？

我们知道window.open可以新开窗口或标签页（这通常和浏览器的设置选项有关），载入指定的URL到新的或已存在的窗口中，并返回代表那个窗口的window对象。window.close可以关闭窗口，但是只能自动关闭JS打开的窗口，如果要关闭其他窗口，必须提示用户进行确定或取消操作（这个与浏览器相关，经测IE需要提示才能关闭；其他浏览器不允许自动关闭）。

我们可以直接使用window.open()打开窗口，使用window.close()关闭窗口


"utf-8">

window.open和window.close的使用详解

(function(){

var $ = function(id) {return document.getElementById(id);}

var win = null;

//打开窗口

$(‘openWindow‘).onclick = function() {

win = window.open();

}

//关闭窗口

$(‘closeWindow‘).onclick = function() {

win && win.close();

}

//自动关闭窗口

window.close();

})();

window.open(URL, name[, property][, boolean])需要四个参数：

第一个参数URL：新窗口中显示的文档的URL，如果省略了或者为空时，会使用‘about:blank‘

第二个参数name：新窗口的名字，可以配合target使用，如果省略了，会使用‘_blank’（这里需要简单介绍一下：_parent和_top，_parent指的是直接父级窗口，_top指的是顶级祖先窗口）

第三个参数protery：以逗号分割的可选参数，包含窗口大小和各种属性。如果省略了，那么会用默认的大小和标准的UI组件（显式的调用更像是打开窗口，而不是标签）。这个参数是非标准的，HTML5规范也主张浏览器忽略它。

第四个参数boolean：只有在第二个参数命名的是存在的窗口，才有效。声明了由第一个参数指定的URL，替换窗口浏览历史的当前条目。

window.opener指的是原始窗口，如果没有的话，为null。


"utf-8">

window.open和window.close的使用详解


      
      
      
      
(function(){

      
 var 
$ = function(id) {return 
document.getElementById(id);}

      
 var 
win = null;

      
 //打开窗口

      
 $(‘openWindow‘).onclick = function() {

      
  win = window.open(‘about:blank‘, ‘_blank‘, ‘width=200,height=200‘);

      
  //win.opener指的是新窗口原始窗口

      
  //alert(win.opener === window);

      
 }

      
 //关闭窗口

      
 $(‘closeWindow‘).onclick = function() {

      
  win && win.close();

      
  //主动关闭窗口后win.opener为false

      
  //alert(win.opener === window);

      
 }

      
 //alert(window.opener === window);

      
 //自动关闭窗口

      
 //window.close();

      })();

window.open和window.close的使用详解,搜素材,soscw.com

window.open和window.close的使用详解

标签：blog class code c java tar

原文地址：http://www.cnblogs.com/xiaoheimiaoer/p/3735076.html

上一篇：import javax.swing.JOptionPane

下一篇：C#创建Windows Service(Windows 服务)基础教程

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：window.open和window.close的使用详解
文章链接：http://soscw.com/essay/23020.html

亲，登录后才可以留言！

window.open和window.close的使用详解

评论

热门文章

推荐文章

最新文章

置顶文章