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的更多相关文章

  1. python 解决抓取网页中的中文显示乱码问题

    关于爬虫乱码有很多各式各样的问题,这里不仅是中文乱码,编码转换.还包括一些如日文.韩文 .俄文.藏文之类的乱码处理,因为解决方式是一致的,故在此统一说明. 网络爬虫出现乱码的原因 源网页编码和爬取下来 ...

  2. 如何批量下载网站中的超链接（一次性下载网页中所有可能的PDF文件）

    最近公司在做工程项目,实现文件批量下载. 网上找了很久,发现网上的代码都有相似的问题,不过最终还是让我找到了一个符合的项目. 工程: 进行项目文件下载功能分析,弄清楚文件批量下载的原理,提供的数据支持 ...

  3. 1. svg学习笔记-在网页中使用svg

    在网页中使用svg有以下三种方式 1. svg归根结底来说是一种图像格式,虽然有别于jpeg,gif,png等位图图像格式,所以在网页中能嵌入图像的地方都可以嵌入svg,例如将svg文件设置为< ...

  4. 网页中显示pdf

    1.<embed width="800" height="600" src="test_pdf.pdf"> </embed ...

  5. 非常好的在网页中显示pdf的方法

    今天有一需求,要在网页中显示pdf,于是立马开始搜索解决方案,无意中发现一个非常好的解决方法,详见http://blogs.adobe.com/pdfdevjunkie/web_designers_g ...

  6. 在网页浏览器中原生显示PDF文件

    在网页中直接显示pdf格式的文件方便阅读.但是如果文件较大加载速度会很慢,另外如果客户端没有安装pdf阅读插件的话,也就看不了了. 这种方式的好处就是不需要转换,直接显示,而且在加载时(高级的浏览器, ...

  7. 网页中显示pdf的方法

    非常好的在网页中显示pdf的方法 今天有一需求,要在网页中显示pdf,于是立马开始搜索解决方案,无意中发现一个非常好的解决方法,详见http://blogs.adobe.com/pdfdevjunki ...

  8. 在网页中显示PDF文件及vue项目中弹出PDF

    1.<embed width="800" height="600" src="test_pdf.pdf"> </embed ...

  9. 利用FlashPaper在web页面中显示PDF文件(兼容各浏览器）

    应项目需求要把PDF内嵌到网页中显示,其中有了很多办法,比如用<embed/>元素放入PDF文件,但是效果不理想,浏览器兼容不理想,在ie9/8(其他版本没有测试)显示会提示下载pdf文件 ...

随机推荐

  1. Linux操作系统定时任务系统 Cron 入门

    cron是一个linux下的定时执行工具,可以在无需人工干预的情况下运行作业.由于Cron 是Linux的内置服务,但它不自动起来,可以用以下的方法启动.关闭这个服务: /sbin/service c ...

  2. 【咸鱼教程】TextureMerger1.6.6 二：Sprite Sheet的制作和使用

    Sprite Sheet主要用于将零碎的小图合并成一张整图.减少加载图片时http的请求次数. 1 打开TextureMerger,选择Sprite Sheet 2  添加纹理(未创建项目时,会先弹出 ...

  3. css的border的solid

    http://www.w3school.com.cn/cssref/pr_border-style.asphttp://www.w3school.com.cn/tiy/t.asp?f=csse_bor ...

  4. Python多线程应用示例

    实现任务描述如下: 创建多个子线程,共同访问一个队列中的元素,并执行相应操作.要求要按照元素的执行要按照队列顺序,并且元素的执行不能有重复. 示例代码如下: #simple sample to sho ...

  5. 爬取博主的所有文章并保存为PDF文件

    继续改进上一个项目,上次我们爬取了所有文章,但是保存为TXT文件,查看不方便,而且还无法保存文章中的代码和图片. 所以这次保存为PDF文件,方便查看. 需要的工具: 1.wkhtmltopdf安装包, ...

  6. 关于51单片机使用printf串口调试

    在51系列单片机上面使用串口的时候,有时候为了方便调试看一下输出结果,会用到printf函数输出到电脑终端,再用串口助手显示.但是单片机使用printf的时候有一点需要注意的地方. 1.首先添加头文件 ...

  7. 9.21 form 和Ajax详解

    form 表单 参考连接  : http://www.cnblogs.com/liwenzhou/p/8747872.html

  8. CH0101 a^b & CH0102 64位整数乘法

    大数取模的两道题. 虐狗宝典学习笔记: 两个数值执行算术运算时,以参与运算的最高数值类型为基准,与保存结果的变量类型无关.两个32位整数的成绩可能超过int类型的表示范围,但是CPU只会用一个32位寄 ...

  9. Ubuntu下更改Vim配置文件打造C/C++风格

    转载:Ubuntu下更改Vim配置文件打造C/C++风格 Vim默认的配置使用起来还不能让人满意,还需要自己配置 默认配置文件是:/etc/vim/vimrc我们可以在家目录下建立自己的配置文件切换到 ...

  10. kdevelop使用笔记

    https://www.cnblogs.com/-Mr-y/p/7707176.html#_label7