JavaScript浏览器窗口与导航操作详解

Window对象与窗口操作

Window对象

Window对象在操作浏览器窗口方面具有重要作用，开发者可以通过它来移动或调整浏览器窗口的大小。实现这些操作主要有四种方法：

moveBy(dx, dy)：该方法用于将浏览器窗口相对于当前位置进行移动，水平方向移动dx个像素，垂直方向移动dy个像素。当dx为负值时窗口向左移动，dy为负值时窗口向上移动。

moveTo(x, y)：此方法用于将浏览器窗口移动，使其左上角位于屏幕坐标(x, y)处。虽然可以使用负数坐标，但这会导致窗口的一部分移出屏幕可视区域。

resizeBy(dw, dh)：该方法用于调整浏览器窗口的当前大小，宽度调整dw个像素，高度调整dh个像素。当dw或dh为负值时，窗口尺寸会缩小。

resizeTo(w, h)：此方法将窗口的宽度设置为w，高度设置为h。需要注意的是，不能使用负数值作为参数。

需要注意的是，Firefox和Chrome浏览器默认情况下不允许执行上述窗口操作，用户需要在浏览器的安全设置中更改相关权限才能生效。

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

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>JavaScript窗口操作</title>  </head> <body> <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"/> </body> </html> 

打开新窗口与动态内容写入

导航和打开新窗口通常使用window.open()方法，该方法接受四个参数：要载入新窗口的页面的URL、新窗口的名字、特性字符串以及一个布尔值，用于说明是否用新载入的页面替换当前载入的页面。一般情况下只需使用前三个参数，最后一个参数仅在window.open()无法打开新窗口时才有效。

第三个参数（特性字符串）的可选值如下：

top=pixels：指定窗口的y坐标。

特性字符串是以逗号分隔的，因此在逗号或等号后不能包含空格。

示例：

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>JavaScript打开新窗口</title>  </head> <body> <input type="button" value="打开窗口" onclick="open_win()"> </body> </html> 

可以使用document对象的open、write和close等方法向新打开的窗口中写入内容，具体操作如下所示：

 
<script type="text/javascript">
function run(){
var oNewWin=window.open("about:blank","newwindow","height=300,width=400");
oNewWin.document.open();
oNewWin.document.write("<html><body><script>function test(){alert('test');}</scr"+"ipt><input type='button' value='test' onclick='test()'/></body></html>");
oNewWin.document.close();
} 
</script>
<input type='button' value='run' onclick='run()'/>

location对象解析URL

location对象可以用来解析URL，例如URL为：https://www.jb51.net/2012/04/14/2446762.html#top?id=1，则:

hash:#top

host:www.cnblogs.com

hostname:www.cnblogs.com

href:https://www.jb51.net/2012/04/14/2446762.html#top?id=1

pathname:/artwl/archive/2012/04/14/2446762.html

port:空白

protocol:http:

search:?id=1

作者：Artwl

出处：http://artwl.cnblogs.com