JavaScript Advanced Programming Reading Notes (15) JavaScript_javascript skills in browsers

Window对象

窗口操作
　　Window对象对操作浏览器窗口非常有用，开发者可以移动或调整浏览器窗口的大小。可用四种方法实现这些操作：
　　moveBy(dx,dy)：把浏览器窗口相对当前位置水平移动dx个像素，垂直移动dy个像素。dx值为负左移，dy为负上移。
　　moveTo(x,y)：移动浏览器窗口，使它的左上角位于用户屏幕的(x,y)处。可以使用负数，不过这样会把部分窗口移出屏幕的可视区域。
　　resizeBy(dw,dh)：相对浏览器窗口当前大小，把窗口的宽度调整dw个像素，高度调整dy个像素。dw、dy为负时缩小窗口。
　　resizeTo(w,h)：把窗口的宽度调整为w，高度调整为h，不能使用负数。

注，FireFox跟Chrome默认不允许进行此操作，要在安全设置里更改

效果(在IE浏览器中有效果)：

<meta charset="utf-8"> <title>JavaScript窗口操作</title> <script type="text/javascript"> function moveByF(){ top.window.moveBy(100,100); } function moveToF(){ top.window.moveTo(100,100); } function resizeByF(){ top.window.resizeBy(100,100); } function resizeToF(){ top.window.resizeTo(100,100); } </script> <input type="button" onclick="moveByF()" value="moveBy"> <input type="button" onclick="moveToF()" value="moveTo"> <input type="button" onclick="resizeByF()" value="resizeBy"> <input type="button" onclick="resizeToF()" value="resizeTo">
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

导航和打开新窗口

　　导航和打开新窗口用 window.open() 方法，该方法接受四个参数，即要载入新窗口的页面的URL，新窗口名字，特性字符串和说明是否用新载入的页面替换当前载入的页面的Boolean值。一般只用前三个参数，最后一个参数只有在window.open()打不开新窗口时才有效。

　　第三个参数可选值如下：

top=pixels窗口的 y 坐标。

left=pixels	窗口的 x 坐标。以像素计。
height=pixels	窗口文档显示区的高度。以像素计。
width=pixels	窗口的文档显示区的宽度。以像素计。
resizable=yes|no	窗口是否可调节尺寸。默认是 yes。
scrollable=yes|no	是否显示滚动条。默认是 yes。
location=yes|no	是否显示地址字段。默认是 yes。
status=yes|no	是否添加状态栏。默认是 yes。
toolbar=yes|no	是否显示浏览器的工具栏。默认是 yes。

特性字符串是以逗号分隔的，所以在逗号或等号后不能有空格。

示例：

<meta charset="utf-8"> <title>JavaScript打开新窗口</title> <script type="text/javascript"> function open_win() { window.open("http://www.cnblogs.com","_blank","width=800,height=400,left=100,top=100") } </script> <input type="button" value="打开窗口" onclick="open_win()">
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

document对象

　　用document的open、write、close等方法可以向新打开的窗口中写入内容，如下所示：

复制代码 代码如下:

• An in-depth analysis of the Bootstrap list group component
• Detailed explanation of JavaScript function currying
• Complete example of JS password generation and strength detection (with demo source code download)
• Angularjs integrates WeChat UI (weui)
• How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills