`
log_cd
  • 浏览: 1098507 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

js得到窗口/对象尺寸/刷新父页面的多种方法

阅读更多
网页可见区域宽: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.availWidth


HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

IE,FireFox 差异如下:

IE6.0、FF1.06+:

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border

IE5.0/5.5:
clientWidth = width - border

clientHeight = height - border

offsetWidth = width

offsetHeight = height

(需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

网页可见区域宽: 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.availWidth



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

技术要点
本节代码主要使用了Document对象关于窗口的一些属性,这些属性的主要功能和用法如下。

要得到窗口的尺寸,对于不同的浏览器,需要使用不同的属性和方法:若要检测窗口的真实尺寸,在Netscape下需要使用Window的属性;在IE下需要深入Document内部对body进行检测;在DOM环境下,若要得到窗口的尺寸,需要注意根元素的尺寸,而不是元素。

Window对象的innerWidth属性包含当前窗口的内部宽度。Window对象的innerHeight属性包含当前窗口的内部高度。

Document对象的body属性对应HTML文档的标签。Document对象的documentElement属性则表示HTML文档的根节点。

document.body.clientHeight表示HTML文档所在窗口的当前高度。document.body. clientWidth表示HTML文档所在窗口的当前宽度。

自调用函数(Self-invoking Functions)自调用函数也是匿名函数的一种表现形式,这个函数在定义之后,直接调用。非常适合做初始化的工作。如下
   
( function(){   
   alert('haha');alert("/^(\s+)|(\s+)$/g");
 }   
)();


假设 obj 为某个 HTML 控件。

obj.offsetTop 指 obj 距离上方或上层控件的位置,整型,单位像素。

obj.offsetLeft 指 obj 距离左方或上层控件的位置,整型,单位像素。

obj.offsetWidth 指 obj 控件自身的宽度,整型,单位像素。

obj.offsetHeight 指 obj 控件自身的高度,整型,单位像素。


刷新父页面的多种方法
1.弹出子页面
window.opener.location.reload(); 

2.子窗口刷新父窗口
self.opener.location.reload();

3.刷新以open()方法打开的窗口
window.opener.location.href=window.opener.location.href;

4.刷新以winodw.showModelDialog()方法打开的窗口
window.parent.dialogArguments.document.execCommand('Refresh'); 
分享到:
评论

相关推荐

    刷新父窗口的多种方法

    ### 刷新父窗口的多种方法 在Web开发中,经常会出现需要从子窗口或弹出窗口刷新父窗口的情况。这通常发生在使用JavaScript进行页面交互时。本文将详细介绍四种不同的方法来实现这一目标。 #### 1. 弹出子页面刷新...

    easyUi弹出window窗口传值与调用父页面的方法,子页面给父页面赋值

    在EasyUI中,我们可能会遇到需要在弹出窗口(子页面)与父页面之间进行数据传递或调用父页面方法的需求。下面将详细讲解这个过程。 首先,让我们理解标题中的“弹出window窗口传值”。在EasyUI中,创建一个弹出窗口...

    JS当前页面和框架自动刷新的方法

    在探讨“JS当前页面和框架自动刷新的方法”这一主题时,我们主要关注的是如何利用JavaScript来实现网页及其框架内的页面自动或手动刷新的功能。本文将深入解析提供的代码示例,并详细阐述各种刷新方法的工作原理及...

    js实现刷新当前页面

    #### 二、JavaScript 刷新页面的方法 ##### 1. `reload` 方法 - **定义**: `reload` 方法用于强制浏览器刷新当前页面。 - **语法**: `location.reload([bForceGet])` - **参数**: - `bForceGet`: 可选参数,默认为...

    javascript刷新父页面方法汇总详解

    `dialogArguments`对象提供了对调用`showModalDialog()`的父窗口的访问,执行`execCommand('Refresh')`命令可以刷新页面。 6. 在`layer`中刷新当前页 当父页面中包含多个`iframe`时,可能需要根据特定条件刷新...

    Javascript刷新页面的几种方法

    ### JavaScript刷新页面的方法 在Web开发中,有时候我们需要利用JavaScript来实现页面的自动刷新或跳转功能。本文将详细介绍几种常见的使用JavaScript刷新页面的方法,并解释它们的工作原理。 #### 1. 使用`...

    jquery刷新页面和JS常用的函数

    ### jQuery 刷新页面与 JavaScript 常用函数详解 #### 一、jQuery 刷新页面方法 在实际开发中,有时我们需要通过脚本来控制页面的刷新。对于这种情况,jQuery 提供了简便的方式来完成这一操作。 **刷新当前页面:...

    JS刷新页面

    通过上述介绍,我们可以看到JavaScript提供了多种方法来刷新页面,每种方法都有其适用场景。开发者可以根据具体需求选择合适的方法来实现页面的刷新功能。同时,需要注意的是,在某些情况下,频繁刷新页面可能会对...

    js页面跳转 多种javascript页面中转方法

    - **更新当前页面内容**:如表单提交后刷新页面展示新数据。 ### 5. `top.location` #### 实现方式: ```javascript <script language="javascript"> alert("是否确定?"); // 提示确认信息 top.location = 'xx....

    js自动刷新代码

    这种方法适用于需要刷新页面中的某个特定部分的情况。 ##### 3. 跳转到指定页面 有时候我们可能需要在一段时间后跳转到另一个页面,这可以通过设置定时器来实现: ```javascript // 在2秒后跳转到指定页面 ...

    jsp返回上一页和刷新

    jsp返回上一页和刷新是一种常见的jsp开发需求,本文总结了一些常用的jsp返回上一页和刷新的方法,包括使用JavaScript返回上一页和刷新页面、自动刷新页面、ASP.NET输出刷新父窗口脚本语句、JS刷新框架的脚本语句等。

    javascript刷新页面方法小结

    JavaScript提供了多种刷新页面的方法,每种方法都有其适用场景和局限性。开发者应根据具体需求选择最合适的刷新策略。例如,对于简单的页面刷新,`location.reload()`通常是最佳选择;而对于更复杂的场景,如多框架...

    子窗口传值到父窗口.rar

    在JavaScript中,我们可以利用多种方法实现这一功能。以下是一些常用的技术和步骤: 1. **使用window.opener属性**: - 子窗口可以通过`window.opener`属性访问父窗口的对象。例如,如果我们在子窗口中有一个变量`...

    JavaScript刷新页面大全

    ### JavaScript刷新页面大全 在Web开发中,页面的刷新是一个常见的需求。JavaScript作为一种客户端脚本语言,提供了多种方法来实现页面的刷新功能。本文将详细介绍几种常见的方式,并给出相应的代码示例。 #### 1....

    javascript刷新父页面的各种方法汇总

    JavaScript提供了多种方法来实现这个功能,下面将对这些方法进行详细地汇总说明。 1. 使用iframe刷新父页面: 如果父页面中含有iframe嵌套子页面,子页面可以通过更改iframe的src属性来刷新整个父页面。这种方法...

    jquery刷新页面

    3. `opener.location.reload()` 方法:该方法用于重新加载父窗口对象(用于单开窗口)。 4. `top.location.reload()` 方法:该方法用于重新加载最顶端对象(用于多开窗口)。 在实际开发中,我们可以根据需要选择...

    js刷新页面方法大全

    在本文中,将详细介绍JS刷新页面的多种方法。 1. 使用location.reload()方法 location是浏览器的Window对象的属性,代表当前URL的信息,提供了与当前URL进行交互的能力。其中,reload()方法可以用来强制浏览器刷新...

    浅析JS刷新框架中的其他页面 && JS刷新窗口方法汇总

    标题《浅析JS刷新框架中的其他页面 && JS刷新窗口方法汇总》表明文章将深入探讨在JavaScript(JS)中实现页面刷新的技术,特别是针对在使用iframe框架的网页结构中的特定页面刷新,以及如何刷新浏览器窗口或标签页。...

    页面刷新实现方法总结

    对于需要根据用户操作或特定条件刷新页面的情况,此方法提供了灵活性。 #### 刷新指定`iframe`或窗口 如果页面包含`iframe`元素,可以通过访问其`contentWindow`或`contentDocument`对象来刷新: ```javascript ...

    js页面跳转和自动刷新

    通过以上介绍,我们可以看到JavaScript提供了多种方法来实现页面跳转和刷新。选择哪种方法取决于具体的应用场景和技术需求。在实际开发中,开发者应该根据项目的实际情况和需求灵活选择合适的方案。例如,对于简单的...

Global site tag (gtag.js) - Google Analytics