网页中自适应的显示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>

  

时间: 2024-10-20 15:53:55

网页中自适应的显示PDF的相关文章

网页请求到页面显示的过程描述

1.在浏览器中输入网址 2.发送至DNS服务器获得web服务器的ip地址 3.建立TCP连接 4.浏览器向web服务器发送http请求 5.web服务器响应请求并返回url数据,或者错误信息,如果设置从定向,则返回新的url地址 6.浏览器下载数据并解析html源文件,同时对网页进行排版,最后将html基础页面显示在浏览器中 7.分析网页中的超链接显示在当前页面,直到没有超链接需要发送,页面显示完成.

Hybrid----使用UIWebView显示PDF等文档

App中若需要显示pdf.word文档,这时候没有其他控件,比UIWebView更适合,它高度抽象了技术细节,可以很简单的使用 UIWebView可打开文件类型列表 (需要iOS3.0系统以上) 可以看到Excel.PPT.PDF.Word都可打开. 点击可下载打开PDF的Demo 将UIWebView加入到界面,获得源文件路径,打开文件 NSString *path = [[NSBundle mainBundle] pathForResource:@"Swift" ofType:@&

网页中常用的效果

一.网页中常常需要显示天气: <iframe width="310" scrolling="no" height="25" frameborder="0" allowtransparency="true" src="http://i.tianqi.com/index.php?c=code&id=40&icon=1&num=3"></iframe&

如何在网页中显示pdf

用如下的html代码即可(例子见http://www.cnblogs.com/zhangzujin/p/3768592.html): <div class="postBody"> <div id="cnblogs_post_body"> <p><iframe src="您要展示的pdf的网址" width="680" height="680"></ifr

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

今天有一需求,要在网页中显示pdf,于是立马开始搜索解决方案,无意中发现一个非常好的解决方法,详见http://blogs.adobe.com/pdfdevjunkie/web_designers_guide. 其实就光看这个网站也足够了,http://www.pdfobject.com/. 记录一下主要代码: <script type="text/javascript" src="scripts/pdfobject/pdfobject.js"><

网页中显示pdf

1.<embed width="800" height="600" src="test_pdf.pdf"> </embed> 通过的浏览器:360.Firefox.IE.Chrome 2.<object classid="clsid:CA8A9780-280D-11CF-A24D-444553540000" width="800" height="600"

在jsp上显示pdf||网页直接打开PDF 在IE中显示pdf文档的方法及参数设置

一:在jsp上显示pdf <%@ page language="java" import="java.util.*,java.io.*" pageEncoding="ISO-8859-1"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://"     + request.getSer

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

在网页中直接显示pdf格式的文件方便阅读.但是如果文件较大加载速度会很慢,另外如果客户端没有安装pdf阅读插件的话,也就看不了了. 这种方式的好处就是不需要转换,直接显示,而且在加载时(高级的浏览器,像Chrome,火狐等),加逐步加载. <html><body marginwidth="0" marginheight="0" style="<embed width="100%" height="100

网页中显示pdf的方法

非常好的在网页中显示pdf的方法 今天有一需求,要在网页中显示pdf,于是立马开始搜索解决方案,无意中发现一个非常好的解决方法,详见http://blogs.adobe.com/pdfdevjunkie/web_designers_guide. 其实就光看这个网站也足够了,http://www.pdfobject.com/ 记录一下主要代码: <script type="text/javascript" src="scripts/pdfobject/pdfobject.