JavaScript高级程序设计 阅读笔记（十五） 浏览器中的JavaScript
时间：2024-04-10 10:57:11
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浏览器中有效果)：
<!DOCTYPE html> <html> <head> <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> </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，新窗口名字，特性字符串和说明是否用新载入的页面替换当前载入的页面的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。 |
特性字符串是以逗号分隔的，所以在逗号或等号后不能有空格。
示例：
<!DOCTYPE html> <html> <head> <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> </head> <body> <input type="button" value="打开窗口" onclick="open_win()"> </body> </html>
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，例如 URL为：https://www.aspxhome.com/2012/04/14/2446762.html#top?id=1，则:
hash:#top
host:www.cnblogs.com
hostname:www.cnblogs.com
href:https://www.aspxhome.com/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
0
投稿猜你喜欢
Python树莓派学习笔记之UDP传输视频帧操作详解
python神经网络Keras GhostNet模型的实现
解析SQL2005中如何使用CLR函数获取行号
学习JavaScript设计模式(接口)
一文速学Python+Pyecharts绘制树形图
sql2000如何完美压缩.mdf文件
Python人工智能学习PyTorch实现WGAN示例详解
JS实现json数组排序操作实例分析
PHP实现视频文件上传完整实例
Python 中的反转字符串reversed(),切片
Python函数递归调用实现原理实例解析
vue中使用props传值的方法
phpmyadmin 4+ 访问慢的解决方法
深入学习SQL Server聚合函数算法优化技巧
关于存储过程的编写的一些体会
python函数中return后的语句一定不会执行吗？
Python实现数字的格式化输出
python flask sqlalchemy连接数据库流程介绍
python3模拟实现xshell远程执行linux命令的方法
vue实现页面添加水印
