JavaScript高级程序设计 阅读笔记(十五) 浏览器中的JavaScript_javascript技巧
程序员文章站
2022-04-23 13:30:18
...
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浏览器中有效果):
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
导航和打开新窗口
导航和打开新窗口用 window.open() 方法,该方法接受四个参数,即要载入新窗口的页面的URL,新窗口名字,特性字符串和说明是否用新载入的页面替换当前载入的页面的Boolean值。一般只用前三个参数,最后一个参数只有在window.open()打不开新窗口时才有效。
第三个参数可选值如下:
top=pixels窗口的 y 坐标。
特性字符串是以逗号分隔的,所以在逗号或等号后不能有空格。
示例:
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
document对象
用document的open、write、close等方法可以向新打开的窗口中写入内容,如下所示:
窗口操作
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浏览器中有效果):
[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。 |
特性字符串是以逗号分隔的,所以在逗号或等号后不能有空格。
示例:
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
document对象
用document的open、write、close等方法可以向新打开的窗口中写入内容,如下所示:
复制代码 代码如下:
上一篇: JS调用打印机功能简单示例
下一篇: 前端学习一 - 喵小柒
推荐阅读
-
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML_javascript技巧
-
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件_javascript技巧
-
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型_javascript技巧
-
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型_javascript技巧
-
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换_javascript技巧
-
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换_javascript技巧
-
JavaScript高级程序设计阅读笔记(五) ECMAScript中的运算符(一)_javascript技巧
-
JavaScript高级程序设计阅读笔记(五) ECMAScript中的运算符(一)_javascript技巧
-
JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)_javascript技巧
-
JavaScript高级程序设计阅读笔记(十六) javascript检测浏览器和操作系统-detect.js_javascript技巧