问题一:
希望改变当前页面所在的浏览器窗口的大小
解决方案:
使用window对象的方法:resizeTo()和resizeBy()。比如:
window.resizeTo(800, 600); // 将窗口大小调整为宽800,高600,单位为像素
window.resizeBy(50, 50); // 调整窗口大小,在当前基础上,宽和高各增加50
window.resizeBy(50, 0); // 调整窗口大小,在当前基础上,只将宽增加50
window.resizeBy(-50, -50); // 调整窗口大小,在当前基础上,宽和高各减少50
问题二:
上面提到了,resizeTo()和resizeBy()方法不能改变窗口左上角的位置,但有时的确有这种需求,比如最大化窗口。
解决方案:
使用moveTo()方法将浏览器窗口移动到屏幕的指定坐标位置:
moveTo(100, 100); // 将左上角移至(100, 100)点
使用moveBy()方法将浏览器窗口在当前位置基础上移动一个相对偏移量:
moveBy(50, 50); // 将窗口向右和向下各移动50个像素
两个函数的定义为:
window.moveTo(x, y); // x, y 为新位置的两个坐标值
window.moveBy(dx, dy); // dx, dy 是相对偏移的值
现在能够改变窗口的大小,也能改变窗口的位置了,如果两者结合起来就能做更多事情,比如最大化窗口。看下面这个函数:
function maximizeWindow()
{
var offset = (navigator.userAgent.indexOf("Mac") != -1 || navigator.userAgent.indexOf("Gecko") != -1 ||
navigator.appName.indexOf("Netscape") != -1) ? 0 : 4;
window.moveTo(-offset, -offset);
window.resizeTo(screen.availWidth + (2 * offset), screen.availHeight + (2 * offset));
}
该函数能让窗口占据整个屏幕,看起来确实是最大化了,事实却不是这样,不信请查看窗口的最大化按钮。脚本首先为Windows设置了一个额外的偏移量4 (原因看后面),然后再调整窗口的位置和大小,模拟一种最大化的效果。其中screen对象的availWidth和availHeight属性分别表示屏幕的可用宽度和高度(单位为像素),注意它们不包括任务栏的尺寸。
最大化和最小化的概念主要出现在Windows操作系统中,与Macintosh中的窗口就不一样(下次去电脑城,得仔细体验一下有何不同)。也许我们能够模拟一个最大化窗口,但对于不同的浏览器总有些局限性。首先,在Windows中一个真正最大化的窗口左上角的坐标是(-4, -4)而不是(0, 0),这样能将4像素宽的窗口边沿隐藏掉,这也是上面脚本中出现4的原因,而Macintosh则允许窗口细长的边沿总是可见;另外还与浏览器有关系,比如FireFox根本就不允许将窗口移至(-4, -4)这个点。
仅仅通过脚本不能使窗口真正地最大化或最小化。但试试下面这段脚本(只在IE下有效),也许会给你一点惊喜:)
<OBJECT id="min" type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<PARAM name="Command" value="Minimize">
</OBJECT>
<button onclick="min.Click()"><font face="webdings">0</font></button>
<OBJECT id="max" type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<PARAM name="Command" value="Maximize">
</OBJECT>
<button onclick="max.Click()"><font face="webdings">1</font></button>
<OBJECT id="clo" type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<PARAM name="Command" value="Close">
</OBJECT>
<button onclick="clo.Click()"><font face="webdings">r</font></button>
出自 http://tech.sina.com.cn/s/2008-06-27/0941710872.shtml
分享到:
相关推荐
js动态的获取浏览器页面放大缩小的比例
根据浏览器大小使网页内容自动放大缩小,小巧的js 节省代码量
页面放大缩小代码,兼容所有浏览器,代码简单,易学易用。
http://blog.csdn.net/qqyangwang/article/details/8513662 我的这篇文章的源码。
flex实现图片浏览、放大、缩小、复位、第一张、下一张、上一张和最后一张功能。并能结合jsp、js实现动态效果
主要实现了pdf的绘制,同时实现了pdf文件的放大缩小,
viewer.js图片放大缩小使用的js
js放大缩小拖拽图片(兼容IE、火狐)的js脚本实例
http://blog.csdn.net/qqyangwang/article/details/8513662 文章的源码,欢迎下载。
javascript自定义浏览器窗口,熟练使用javaScript原理,解决窗口拖动、放大缩小、最小化、全屏的功能
主要介绍了JS根据浏览器窗口大小实时动态改变网页文字大小的方法,涉及JavaScript针对页面宽高的动态获取与元素样式动态运算的相关技巧,需要的朋友可以参考下
实现PDF在线预览,并可以支持手势放大缩小,用微信浏览器中预览pdf文件,并实现手势放大缩小
手机端web网页项目 ...现在的手机或平板电脑等移动设备上的浏览器默认都有双击放大的设置,怎么让双击不放大? 解决方案: 可以在页面头部加上meta <meta name="viewport" content="width=device-
存原生JS;右下角文本弹窗可以放大和缩小,弹窗内自定义添加文字或者图片外链;适用浏览器:IE8+和其他主流浏览器。
本文实例讲述了JS实现图片放大缩小的方法。分享给大家供大家参考,具体如下: 最近经常看见有人问怎样放大和缩小图片,我之前也做过一次,下面就把我的方法共享出来。我有2个种方法实现:第一种方法可以兼容IE和火狐...
主要介绍了用HTML5实现鼠标滚轮事件放大缩小图片的功能,其中Safari浏览器用户要注意是否禁用了鼠标滚动控制页面滑动的功能,需要的朋友可以参考下
Magnifier是一款使用纯js制作的图片放大镜插件。Magnifier放大镜插件几乎兼容所有浏览器,它可以使用鼠标滚轮放大缩小图片,并且具有像幻灯片一样切换图片的功能。
本文实例讲述了JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法。分享给大家供大家参考,具体如下: 为什么会有人会使用ctrl+鼠标滚轮缩放网页?坚决禁止! <html> <head> <title>测试</title...
随着页面的放大或者缩小,字体也跟随着放大或者缩小。 当然,可以设置一个最大值,一个中间值和一个最小值。 此效果多半应用于响应式页面中,或者需要适用多版本终端浏览器的页面中 适用方法: 1、...
通过移动鼠标,横竖排列整齐的多个页面以滚动方式展现,各页面还可任意放大、缩小,想查看哪个页面时点击放大即可。 升级后的亮点: 如果你在Venus里面搜索却没有看到属于用户自行创建的3D网页,可以试一试"lady gaga...