本文详细介绍JavaScript中Window对象对浏览器窗口的控制方法,包括moveBy、moveTo、resizeBy和resizeTo的具体参数与行为限制。同时解析location对象如何拆解URL各部分,以及利用window.open打开新窗口并通过document动态写入HTML内容的完整流程与注意事项。
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> [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
导航和打开新窗口
打开新窗口与动态内容写入
导航和打开新窗口通常使用window.open()方法,该方法接受四个参数:要载入新窗口的页面的URL、新窗口的名字、特性字符串以及一个布尔值,用于说明是否用新载入的页面替换当前载入的页面。一般情况下只需使用前三个参数,最后一个参数仅在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。 |
特性字符串是以逗号分隔的,因此在逗号或等号后不能包含空格。
示例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>JavaScript打开新窗口</title> </head> <body> <input type="button" value="打开窗口" onclick="open_win()"> </body> </html> [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
document对象
可以使用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对象
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