window.open()方法可以导航到一个特定的URL，也可以打开一个新的浏览器窗口。这个方法接收4个参数：要加载的URL、窗口目标、一个特性字符串以及一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值
参数
【1】通常只需要传递第一个参数，默认在新窗口打开
<div>点击此处</div> <script> myDiv.onclick = function(){ window.open("http://baidu.com"); } </script>
【2】第二个参数表示已有窗口或者框架的名称，或者是_self、_parent、_top、_blank等窗口打开方式
<div>点击此处</div> <script> //在当前窗口打开 myDiv.onclick = function(){ window.open("http://baidu.com",'_self'); } </script>
【3】第三个参数是一个逗号分隔的设置字符串，表示在新窗口中都显示哪些特性
<div>点击此处</div> <script> myDiv.onclick = function(){ //在新窗口中打开高度为500，宽度为500，纵坐标为0，横坐标为200的qq网页 window.open("http://qq.com","_blank","height=500,width=500,top=0,left=200") } </script>
【4】第四个参数只在第二个参数命名的是一个存在的窗口时才有用。它是一个布尔值，声明了由第一个参数指定的URL是应用替换掉窗口浏览历史的当前条目(true)，还是应该在窗口浏览历史中创建一个新的条目(false)，后者是默认的设置
返回值
open()方法的返回值是新窗口的Window对象
<div>点击此处</div> <script> myDiv.onclick = function(){ var w = window.open(); w.document.body.innerHTML = '测试文字'; } </script>
新创建的window对象有一个opener属性，其中保存着打开它的原始窗口对象
<div>点击此处</div> <script> myDiv.onclick = function(){ var w = window.open(); console.log(w.opener === window);//true } </script>
过滤
大部分浏览器都有弹出窗口过滤系统。通常，open()方法只有当用户手动单击按钮或者链接的时候才会 调用。javascript代码尝试在浏览器初始载入时开启一个弹出窗口时，通常会失败。如果被拦截，则返回值是undefined
<div>点击此处</div> <script> var w = window.open(); console.log(w);//undefined </script>
窗口关闭
就像方法open()打开一个新窗口一样，方法close()将关闭一个窗口。如果已经创建了 Window对象w，可以使用如下的代码将它关掉
<div> <span>打开窗口</span> <span>关闭窗口</span> </div> <script> var w; span1.onclick = function(){ w = window.open(); } span2.onclick = function(){ if(w){ w.close(); } } </script>
新窗口的对象w还有一个closed属性，用于检测是否被关闭
<div>点击此处</div> <script> //先显示false，1s后显示true myDiv.onclick = function(){ var w = window.open(); console.log(w.closed);//false setTimeout(function(){ w.close(); console.log(w.closed);//true },1000); } </script>
小应用
通过window.open()返回的对象可以操作新打开窗口的开闭
<div>打开窗口</div> <script> var w = null; myDiv.onclick = function(){ //如果w不存在，即没有打开新窗口，或新窗口被关闭 if(!w){ w = window.open("http://baidu.com","_blank","height=400,width=400,top=10,left=10"); myDiv.innerHTML = '关闭窗口'; //如果w存在，说明新窗口被打开 }else{ w.close(); w = null; myDiv.innerHTML = '打开窗口'; } } </script>
总结
这篇文章主要介绍了JavaScript浏览器窗口的基本操作,理解起来很简单，但是非常实用的功能,希望对大家日常使用JavaScript能有有所帮助。
您可能感兴趣的文章: