javascript获得网页窗口实际大小的示例代码


Posted in Javascript onSeptember 21, 2013

javascript代码:

function get_page_size() 
{ 
var re = {}; 
if (document.documentElement && document.documentElement.clientHeight) 
{ 
var doc = document.documentElement; 
re.width = (doc.clientWidth>doc.scrollWidth)?doc.clientWidth-1:doc.scrollWidth; 
re.height = (doc.clientHeight>doc.scrollHeight)?doc.clientHeight:doc.scrollHeight; 
} 
else 
{ 
var doc = document.body; 
re.width = (window.innerWidth>doc.scrollWidth)?window.innerWidth:doc.scrollWidth; 
re.height = (window.innerHeight>doc.scrollHeight)?window.innerHeight:doc.scrollHeight; 
} 
return re; 
} 
904 viewed 3 comment(s)

代码实例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>获取窗口大小</title> 
<script type="text/java script"> 
function getPageSize() 
{ 
var re = {}; 
if (document.documentElement && document.documentElement.clientHeight) 
{ 
var doc = document.documentElement; 
re.width = (doc.clientWidth>doc.scrollWidth)?doc.clientWidth-1:doc.scrollWidth; 
re.height = (doc.clientHeight>doc.scrollHeight)?doc.clientHeight:doc.scrollHeight; 
} 
else 
{ 
var doc = document.body; 
re.width = (window.innerWidth>doc.scrollWidth)?window.innerWidth:doc.scrollWidth; 
re.height = (window.innerHeight>doc.scrollHeight)?window.innerHeight:doc.scrollHeight; 
} 
//结果输出至两个文本框 
document.form1.availHeight.value= re.width; 
document.form1.availWidth.value= re.height; 
return re; 
} 
</script> 
</head> 
<body> 
<form action="#" method="get" name="form1" id="form1"> 
浏览器窗口 的 实际高度: 
<input type="text" name="availHeight" size="4"/> 
<br /> 
浏览器窗口 的 实际宽度: 
<input type="text" name="availWidth" size="4"/> 
<br /> 
</form> 
<script type="text/java script"> 
getPageSize(); 
window.onresize=getPageSize; 
</script> 
</body> 
</html>
Javascript 相关文章推荐
javascript实现的动态文字变换
Jul 28 Javascript
javascript 贪吃蛇实现代码
Nov 22 Javascript
Javascript调用C#代码
Jan 17 Javascript
JS函数实现动态添加CSS样式表文件
Dec 15 Javascript
js出生日期 年月日级联菜单示例代码
Jan 10 Javascript
js判断元素是否隐藏的方法
Jun 09 Javascript
JavaScript处理解析JSON数据过程详解
Sep 11 Javascript
JavaScript实现鼠标点击导航栏变色特效
Feb 08 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
Apr 28 Javascript
基于Vue实例生命周期(全面解析)
Aug 16 Javascript
JavaScript 面向对象基础简单示例
Oct 02 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
Feb 27 Javascript
form表单只提交数据而不进行页面跳转的解决方案
Sep 18 #Javascript
JSON传递bool类型数据的处理方式介绍
Sep 18 #Javascript
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
Sep 18 #Javascript
jquery 实现密码框的显示与隐藏示例代码
Sep 18 #Javascript
script不刷新页面的联动前后代码
Sep 18 #Javascript
js 中的switch表达式使用示例
Jun 03 #Javascript
javascript实现促销倒计时+fixed固定在底部
Sep 18 #Javascript
You might like
一个php作的文本留言本的例子(五)
2006/10/09 PHP
一个没有MYSQL数据库支持的简易留言本的编写
2006/10/09 PHP
PHP登陆后跳转到登陆前页面实现思路及代码
2014/01/17 PHP
destoon供应信息title调用出公司名称的方法
2014/08/22 PHP
php5.3不能连接mssql数据库的解决方法
2014/12/27 PHP
PHP使用array_merge重新排列数组下标的方法
2015/07/22 PHP
windows server 2008/2012安装php iis7 mysql环境搭建教程
2016/06/30 PHP
laravel-admin 实现在指定的相册下添加照片
2019/10/21 PHP
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
2007/09/04 Javascript
jQuery 获取URL参数的插件
2010/03/04 Javascript
js兼容的placeholder属性详解
2013/08/18 Javascript
IE6-8中Date不支持toISOString的修复方法
2014/05/04 Javascript
Js为表单动态添加节点内容的方法
2015/02/10 Javascript
使用jquery提交form表单并自定义action的实现代码
2016/05/25 Javascript
简单谈谈Vue 模板各类数据绑定
2016/09/25 Javascript
JavaScript数组去重的几种方法效率测试
2016/10/23 Javascript
JavaScript之Date_动力节点Java学院整理
2017/06/28 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
2018/02/09 Javascript
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
2019/05/16 Javascript
python 3.5下xadmin的使用及修复源码bug
2017/05/10 Python
python版本的仿windows计划任务工具
2018/04/30 Python
python 3.7.4 安装 opencv的教程
2019/10/10 Python
浅谈Python type的使用
2019/11/19 Python
利用pytorch实现对CIFAR-10数据集的分类
2020/01/14 Python
python-xpath获取html文档的部分内容
2020/03/06 Python
Python使用Pyqt5实现简易浏览器(最新版本测试过)
2020/04/27 Python
k-means 聚类算法与Python实现代码
2020/06/01 Python
CSS3对图片照片进行边缘模糊处理的实现
2018/08/08 HTML / CSS
CSS3 mask 遮罩的具体使用方法
2017/11/03 HTML / CSS
学生的自我鉴定范文
2013/10/24 职场文书
营销专业应届生求职信
2013/11/26 职场文书
旅游与环境专业求职信
2014/06/05 职场文书
导游词之黄果树瀑布
2019/09/20 职场文书
「魔导具师妲莉亚永不妥协~从今天开始的自由职人生活~」1、2卷发售宣传CM公开
2022/03/21 日漫
ConditionalOnProperty配置swagger不生效问题及解决
2022/06/14 Java/Android
mysql拆分字符串作为查询条件的示例代码
2022/07/07 MySQL