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 相关文章推荐
判断目标是否是window,document,和拥有tagName的Element的代码
May 31 Javascript
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
Nov 25 Javascript
jQuery操作 input type=checkbox的实现代码
Jun 14 Javascript
js中call与apply的用法小结
Dec 28 Javascript
js正则表达式中test,exec,match方法的区别说明
Jan 29 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
Nov 13 Javascript
深入解析JavaScript编程中的this关键字使用
Nov 09 Javascript
vuejs绑定class和style样式
Apr 11 Javascript
详解vue slot插槽的使用方法
Jun 13 Javascript
VueJs 将接口用webpack代理到本地的方法
Nov 27 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
Dec 12 Javascript
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
Dec 04 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
dedecms 制作模板中使用的全局标记图文教程
2007/03/11 PHP
php 网上商城促销设计实例代码
2012/02/17 PHP
PHP数组实际占用内存大小原理解析
2020/12/11 PHP
JS BASE64编码 window.atob(), window.btoa()
2021/03/09 Javascript
JavaScript进阶教程(第四课第一部分)
2007/04/05 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
2013/12/29 Javascript
javascript表单验证使用示例(javascript验证邮箱)
2014/01/07 Javascript
js日期联动示例
2014/05/02 Javascript
jquery分割字符串的方法
2015/06/24 Javascript
jQuery实现文本框邮箱输入自动补全效果
2015/11/17 Javascript
用js写的一个路由(简单实例)
2016/09/24 Javascript
完美的js div拖拽实例代码
2016/09/24 Javascript
详解vue+css3做交互特效的方法
2017/11/20 Javascript
Vue开发之封装上传文件组件与用法示例
2019/04/25 Javascript
浅谈Vuex注入Vue生命周期的过程
2019/05/20 Javascript
详解vue或uni-app的跨域问题解决方案
2020/02/21 Javascript
python批量下载图片的三种方法
2013/04/22 Python
python制作websocket服务器实例分享
2016/11/20 Python
浅谈python数据类型及类型转换
2017/12/18 Python
Django rest framework实现分页的示例
2018/05/24 Python
Appium+python自动化之连接模拟器并启动淘宝APP(超详解)
2019/06/17 Python
用Python实现校园通知更新提醒功能
2019/11/23 Python
keras topN显示,自编写代码案例
2020/07/03 Python
基于Pytorch版yolov5的滑块验证码破解思路详解
2021/02/25 Python
乌克兰机票、铁路和巴士票、酒店搜索、保险:Tickets.ua
2020/01/11 全球购物
Booking.com德国:预订最好的酒店和住宿
2020/02/16 全球购物
应届大学生求职信
2013/12/01 职场文书
中学实习教师自我鉴定
2013/12/12 职场文书
关于雷锋的演讲稿
2014/05/10 职场文书
投资意向书
2014/07/30 职场文书
关于诚信的活动方案
2014/08/18 职场文书
我的中国梦演讲稿1000字
2014/08/19 职场文书
大学生第一学年自我鉴定
2014/09/12 职场文书
2014年庆祝国庆65周年演讲稿
2014/09/21 职场文书
搞笑婚礼主持词开场白
2015/11/24 职场文书
浅谈Python3中datetime不同时区转换介绍与踩坑
2021/08/02 Python