关注用户体验,分享前端技术

window.open

摘要:

  当点击某个按钮或者某个事件发生出发浏览器打开一个新的窗口,这种交互在我们开发的时候经常会见到,一般有两种方法:

  1. 通过a标签,<a href="">click</a>,当点击click是就会跳转页面
  2. 通过javascript的window.open()

  下面我们来分析下第二种方法

 window.open

示例:

window.open('http://www.cnblogs.com/xiyangbaixue/','new', 'width=960,height=650,menubar=no,toolbar=no,location=no,directories=no,status=no,scrollbars=yes,resizable=yes');

 

 分析一下其中的参数(其中yes/no也可使用1/0,pixelvalue为具体的数值,单位象素):

alwaysLowered|yes/no|指定窗口隐藏在所有窗口之后

alwaysRaised|yes/no|指定窗口悬浮在所有窗口之上

depended|yes/no|是否和父窗口同时关闭

directories|yes/no|Nav2和3的目录栏是否可见

height|pixelvalue|窗口高度

hotkeys|yes/no|在没菜单栏的窗口中设安全退出热键

innerHeight|pixelvalue|窗口中文档的像素高度

innerWidth|pixelvalue|窗口中文档的像素宽度

location|yes/no|位置栏是否可见

menubar|yes/no|菜单栏是否可见

outerHeight|pixelvalue|设定窗口(包括装饰边框)的像素高度

outerWidth|pixelvalue|设定窗口(包括装饰边框)的像素宽度

resizable|yes/no|窗口大小是否可调整

screenX|pixelvalue|窗口距屏幕左边界的像素长度

screenY|pixelvalue|窗口距屏幕上边界的像素长度

scrollbars|yes/no|窗口是否可有滚动栏

titlebar|yes/no|窗口题目栏是否可见

toolbar|yes/no|窗口工具栏是否可见

Width|pixelvalue|窗口的像素宽度

z-look|yes/no|窗口被激活后是否浮在其它窗口之上

status|yes/no|是否显示状态栏内的信息

left|pixelvalue|窗口距离屏幕左侧的象素值

top|pixelvalue|窗口距离屏幕上方的象素值
  

  

注意:window.open()是在新的tab页打开的,如果我们想弹出一个新的窗口怎么办呢?只需要加上下面的代码

window.open('绝对路径','_blank', 'width=960,height=650,menubar=no,toolbar=no,location=no,directories=no,status=no,scrollbars=yes,resizable=yes');

 

这样就能实现在所有浏览器下都是弹出一个新窗口

 

扩展:

  1. 点击一下改变当前页面内容同时弹出一个新窗口
    <a href="one.html" onclick="window.open('two.html')">click</a>
  2. 在子窗口操作时,刷新父窗口
    opener.location.href=opener.location.href

     

 

posted @ 2014-09-10 09:32  夕阳白雪  阅读(536)  评论(0编辑  收藏  举报