网页中自适应的显示PDF
PDF格式呢，是一个高大的新式，如何在不同的浏览器中自适应显示，是一个值得研究的问题。
这里说明重点部分：获取浏览器宽高。
IE中：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
FireFox中：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
Opera中：
document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）
没有定义W3C的标准，则
IE为：
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0
FireFox为：
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽)
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）
Opera为：
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）
网页可见区域宽： 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 相对文档的水平座标+垂直方向滚动的量
实例代码
< !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>
<title>请调整浏览器窗口</title> <meta http-equiv="content-type" content="text/html; charset=gb2312">
</meta></head>
<body>
<h2 align="center">请调整浏览器窗口大小</h2><hr />
<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/javascript">
<!--
var winWidth = 0;
var winHeight = 0;
function findDimensions() //函数：获取尺寸
{
//获取窗口宽度
if (window.innerWidth)
winWidth = window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
winWidth = document.body.clientWidth;
//获取窗口高度
if (window.innerHeight)
winHeight = window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;
//通过深入Document内部对body进行检测，获取窗口大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
//结果输出至两个文本框
document.form1.availHeight.value= winHeight;
document.form1.availWidth.value= winWidth;
}
findDimensions();
//调用函数，获取数值
window.onresize=findDimensions;
//-->
</script>
</body>
</html>
网页中自适应的显示PDF的更多相关文章
- python 解决抓取网页中的中文显示乱码问题
关于爬虫乱码有很多各式各样的问题,这里不仅是中文乱码,编码转换.还包括一些如日文.韩文 .俄文.藏文之类的乱码处理,因为解决方式是一致的,故在此统一说明. 网络爬虫出现乱码的原因 源网页编码和爬取下来 ...
- 如何批量下载网站中的超链接（一次性下载网页中所有可能的PDF文件）
最近公司在做工程项目,实现文件批量下载. 网上找了很久,发现网上的代码都有相似的问题,不过最终还是让我找到了一个符合的项目. 工程: 进行项目文件下载功能分析,弄清楚文件批量下载的原理,提供的数据支持 ...
- 1. svg学习笔记-在网页中使用svg
在网页中使用svg有以下三种方式 1. svg归根结底来说是一种图像格式,虽然有别于jpeg,gif,png等位图图像格式,所以在网页中能嵌入图像的地方都可以嵌入svg,例如将svg文件设置为< ...
- 网页中显示pdf
1.<embed width="800" height="600" src="test_pdf.pdf"> </embed ...
- 非常好的在网页中显示pdf的方法
今天有一需求,要在网页中显示pdf,于是立马开始搜索解决方案,无意中发现一个非常好的解决方法,详见http://blogs.adobe.com/pdfdevjunkie/web_designers_g ...
- 在网页浏览器中原生显示PDF文件
在网页中直接显示pdf格式的文件方便阅读.但是如果文件较大加载速度会很慢,另外如果客户端没有安装pdf阅读插件的话,也就看不了了. 这种方式的好处就是不需要转换,直接显示,而且在加载时(高级的浏览器, ...
- 网页中显示pdf的方法
非常好的在网页中显示pdf的方法 今天有一需求,要在网页中显示pdf,于是立马开始搜索解决方案,无意中发现一个非常好的解决方法,详见http://blogs.adobe.com/pdfdevjunki ...
- 在网页中显示PDF文件及vue项目中弹出PDF
1.<embed width="800" height="600" src="test_pdf.pdf"> </embed ...
- 利用FlashPaper在web页面中显示PDF文件(兼容各浏览器）
应项目需求要把PDF内嵌到网页中显示,其中有了很多办法,比如用<embed/>元素放入PDF文件,但是效果不理想,浏览器兼容不理想,在ie9/8(其他版本没有测试)显示会提示下载pdf文件 ...
随机推荐
- JavaAgent 应用（spring-loaded 热部署）
上一篇文章简单介绍了 javaagent ,想了解的可以移步 “JavaAgent” 本文重点说一下,JavaAgent 能给我们带来什么? 自己实现一个 JavaAgent xxxxxx 基于 Ja ...
- 【转】python中json.loads与eval的区别
JSON有两种结构: “名称/值”对的集合(A collection of name/value pairs).不同的语言中,它被理解为对象(object),纪录(record),结构(struct) ...
- thinkphp结合layui上传视频
JS示例: <script type="text/javascript"> layui.use(['form', 'layedit','element', 'layda ...
- thinkphp----替换写标签的方法
在用thinkphp写cmf的时候,考虑到一些方法的复用,所以考虑使用写标签. 写标签的好处在于:通用,而且比较容易看,但是封装一个标签,个人觉得还是比较麻烦,想了想 thinkcmf 调用文章的方式 ...
- C++创建窗口程序初步
写在前面:本博客为本人原创,严禁任何形式的转载!本博客只允许放在博客园(.cnblogs.com),如果您在其他网站看到这篇博文,请通过下面这个唯一的合法链接转到原文! 本博客全网唯一合法URL:ht ...
- Bitfinex API
本文介绍Bitfinex APi Platform Status Get the current status of the platform. Maintenance periods last fo ...
- Oracle enterprise linux系统的安装以及ORACLE12C的安装
本文所用到的所有参数均位于文后附录中 进入安装配置目录 分区选择i will configure partitioning 之后选择 请为我分区 关闭KDUMP 更改主机名,打开网络连接 在软件安装中 ...
- window10 telnet的启用
(1) window+R打开运行窗口,输入control,如图: (2) 点击类别改成大图标: 如图所示: 然后点击程序和功能. (3) 然后依次点击:启用或者关闭windows功能->teln ...
- Steady Cow Assignment---poj3189（多重匹配+二分）
题目链接:http://poj.org/problem?id=3189 题意:有n头牛,B个牛棚,每头牛对牛棚都有一个喜欢度,接下来输入N*B的矩阵第i行第j列的数x表示:第i头牛第j喜欢的是x; 第 ...
- 洛谷P3966 单词 [TJOI2013] AC自动机
正解:AC自动机 解题报告: 传送门! 先来提供一个40pts错解QAQ 首先看到这题就会想到AC自动机板子题2鸭!然后就照着那题的套路打一下,随便改一点儿,简单来说就是每次经过一个节点都要++,然后 ...