js中获取各种窗口的大小和鼠标坐标

     转载自:http://wangjianwei866.blog.163.com/blog/static/9295823200910385817632/Juwn's BLOG

     网页可见区域宽:document.body.clientWidth  

     网页可见区域高:document.body.clientHeight  

     网页可见区域宽:document.body.offsetWidth      (包括边线的宽)  

     网页可见区域高:document.body.offsetHeight      (包括边线的宽)  

     网页正文全文宽:document.body.scrollWidth  

     网页正文全文高:document.body.scrollHeight  

     网页被卷去的高:document.body.scrollTop  

     网页被卷去的左:document.body.scrollLeft  

     网页正文部分上:window.screenTop  

     网页正文部分左:window.screenLeft  

     屏幕分辨率的高:window.screen.height  

     屏幕分辨率的宽:window.screen.width  

     屏幕可用工作区高度:window.screen.availHeight  

     屏幕可用工作区宽度:window.screen.availWidthvar t="";

    获取鼠标位置:

     event.clientX 为鼠标距浏览左面边缘的距离, event.clientY 为 鼠村距网页上方边缘的距离,但定位不光这样就行了,需要考虑到当前网页坐标并不是鼠标的位置(例如把网页滚动条拖到最右下方),所以我们需要加上下面的内容:

var x = event.clientX + document.body.scrollLeft;

var y = event.clientY + document.body.scrollTop;

 注意,在使用了W3C标准的网页中,document.body.scrollTop和document.body.scrollLeft会失效,这时要用document.documentElement.scrollTop 和document.documentElement.scrollLeft。否则 scroll 所取出来的值一律为0.js中获取各种窗口的大小和鼠标坐标 - 力宝 - 力宝 的 博客

 --------------------------------------------------------

这里说的网页对话框是指通过脚本代码打开一个新的窗口,并且该窗口可以有返回值。网页对话框分为网页模式对话框和网页非模式对话框。(模式和非模式的区别我在这里就不赘述了)。下面我们只针对网页模式对话框进行说明:

弹出网页模式对话框:

格式:

var somevalue=window.showModalDialog(url[,Arguments[,Features]]);

参数说明:

url :指定url文件地址。

Argument :用于向网页对话框传递参数,传递参数的类型不限制,对于字符串类型,最大为4096字符。也可以传递对象。如index.html.在弹出的窗口中可通过var parameter=window.dialogArguments;获取传递来的参数。

Features:可选项。窗口对话框的设置参数。主要参数如下表:

 

 参数 说明
 dialogWidth :number 用于设置对话框的宽度
 dialogHeight :number 用于设置对话框的高度
 dialogTop :number 用于设置对话框窗口相对于桌面左上角的top位置
 dialogLeft :number 用于设置对话框窗口相对于桌面左侧的left位置
 center :{yes|no|1|0}用于指定是否将对话框在桌面上居中,yes|1为居中,默认值为yes
 Help :{yes|no  1|0} 用于指定对话框窗口中是否显示上下文敏感的帮助图标。默认为yes
 scroll :{yes|no 1|0} 用于指定对话框中是否显示滚动条
 resizable :{yes|no 1|0} 用于指定对话框的大小是否可变。默认为no
 status :{yes|no 1|0} 用于指定对话框是否显示状态栏

 

示例:

说明:点击按钮后打开一网页模式对话框。在网页对话框中选择一个值后关闭该模式对话框。并将返回值传递到父窗口中。如下:

<script language="javascript">

  function openDialog()

   {

     var  somevalue=window.openModalDialog("test.jsp","","dialogWidth=400px;dialogHeight=300px;help=no;status=no")

    document.form1.userName=somevalue; 

  }

在弹出的模式对话框中调用一个js函数向打开的窗口返回信息

function action(user)

{

  parent.window.returnValue=user;

 window.close();

}

流程:通过window.openModalDialog()打开一模式窗口,在打开的窗口中调用action()函数将返回值传递给打开的对话框。

其他说明:

1、弹出全屏显示的网页(模式)对话框

<script language="javascript">

function openDialog()

{

  var width=screen.width;

 var height=screen.height;

window.openModalDialog("test.jsp","","dialogWidth="+width+"px;dialogHeight="+height+"px;status=no");

}

2、建议参数传递方式:
        window.showModalDialog("filename.htm",window)
        //不管要操作什么变量,只直传递主窗口的window对象
      在showModalDialog(或showModelessDialog)读取和设置时:
        alert(window.dialogArguments.var_name)//读取var_name变量
        window.dialogArguments.var_name="oyiboy"//设置var_name变量

        同时我也可以操作var_id变量
        alert(window.dialogArguments.var_id)//读取var_id变量
        window.dialogArguments.var_id="001"//设置var_id变量

        同样还可以对主窗口的任何对象进行操作,如form对象里的元素。
        window.dialogArguments.form1.index1.value="这是在设置index1元素的值"

在父页面中用onClick=""var reVal = window.showModalDialog('changephoto.htm','dialogWidth:500px;dialogHeight:300px;help:no');if (typeof(reVal) != 'undefined') {form.textname.value=reVal;}"" style=""cursor:hand "">点击这里修改图片

在字窗口'changephoto.htm'中打开一个框架集,框架集中包含一个asp文件,先将asp的值返回到changephoto.htm中 再将这个值返回到主页面中

changephoto.htm: <input type=button οnclick="onClose();" value=" 关 闭 ">

function onClose() { window.returnValue = form1.save.value;//也可以将window.returnValue改成window.dialogArguments.oblogform.blogimage.value window.close(); }

asp文件:parent.document.form1.save.value ="值或变量";

---------------------------

方法一 window.open()方法

格式:window var=window.open(url,windowname[,location]);

参数说明:

window var :当前打开窗口的句柄。如果open()方法执行成功,则window var的值为一个window对象的句柄,否则window var的值是一个空值。

url :目标窗口的url。如果url是一个空字符串,则浏览器将打开一个空白窗口。允许用write()方法创建动态HTML。

windowname :window 对象的名称。

location :对窗口属性进行设置。其可选参数如下:

 

 属性 说明
 width 窗口的宽度
 height 窗口的高度
 scrollbars 是否显示滚动条
 resizable 设定窗口大小是否固定
 toolbar 浏览器工具条,包括前进及后退按钮
 menubar 菜单条,一般包括文件,编辑及其他一些条目
 location 定位区,也叫地址栏,是可以输入url的浏览器文本
 direction 更新信息的按钮

 

以下示例为在主页面弹出一个居中显示的窗口,五秒后该窗口自动关闭,并刷新主页面。

<script language="javascript">

function  popups()

{

 var hdc=window.open("test.jsp?id=1","new","width=322,height=206");//打开新窗口并向其传递一个参数

 width=screen.width;

height=screen.height;

hdc.moveTo((width-322)/2,(height-206)/2);//当然,也可以在open()方法里用top和left方法来设置窗口的位置

window.opener.location.reload();//刷新父窗口中的网页

window.setTimeout("window.close()",5000);

}

示例中使用到的几个方法详解:

1、screen对象

    screen是JavaScript中的屏幕对象,反映了当前用户的屏幕设置。该对象常用属性如下:

 

 属性 说明
 width 用户整个屏幕的水平尺寸,以像素为单位
 height 用户整个屏幕的垂直尺寸,以像素为单位
 pixelDepth 显示器的每个像素的位数
 availHeight 返回窗口内容区域的垂直尺寸,以像素为单位
 availWidth 返回窗口内容区域的水平尺寸,以像素为单位

 

2、window.opener

    window.opener.属性

    window.opener.方法

opener属性与打开该窗口的父窗口相联系。当访问子窗口的opener属性时,返回的是父窗口。通过该属性,可以使用父窗口对象中的属性和方法。location.reload()方法为刷新。

3、setTimeout()方法

window对象的setTimeout()用于延时执行某一操作。格式如下:

setTimeout(expression,secdelay[,language]);

参数说明:

expression :是一个字符串,可包含任何对函数,方法或者单个JavaScript语句的调用。

secdelay :指定运行的时间,以毫秒为单位。(1000ms=1s)

language :指定语句或参数expression调用的函数所使用的脚本语言。如果完全用JavaScript,则不需设置该参数。

附加三个:(一)关闭IE窗口时,不弹出询问对话框

 说明:通常使用JavaScript的window.close()方法关闭IE主窗体时,都会弹出“你查看的网页正在试图关闭窗口,……”对话框。用下面语句可以屏蔽该对话框:

<a href="#"  >关闭系统</a>

该方法通过将要关闭的IE窗口的打开窗口(父窗口)设置为null而实现。

(二)显示无边框窗口

  说明 :使用window对象的open()方法中的“fullscreen=1”参数,可以将打开的新窗口全屏显示。(此时就没边框了)。

示例:新建一个辅助页面index,在其中输入:

<script language="javascript">

 winClose();

 function winClose()

{

  window.opener=null;

window.close();

window.open("test.jsp","","fullscreen=1");

}

(三)、弹出指定尺寸的无边框窗口

说明:先通过window对象的open()方法弹出一个最大化窗口,再通过window对象的resizeTo()方法和moveTo()方法控制窗口的尺寸和显示位置。注意:window对象的resizeTo()方法在IE6以上的版本中,只能改变一般状态显示的窗口尺寸,不能改变使用了fullscreen=1设置的窗口。

在要弹出的对话框页面中输入:

<script language="javascript">

 self.resizeTo(321,203);//self:当前窗口

width=screen.width;

height=screen.height;

selt.moveTo((width-240)/2,(height-139)/2);

</script>

另外,在弹出的页面body标志中还需要输入“scroll=no”,否则弹出的窗口会带有滚动条

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值