让iframe自适应高度(支持xhtml)IE firefox兼容

2016-02-19 16:59 4 1 收藏

岁数大了,QQ也不闪了,微信也不响了,电话也不来了,但是图老师依旧坚持为大家推荐最精彩的内容,下面为大家精心准备的让iframe自适应高度(支持xhtml)IE firefox兼容,希望大家看完后能赶快学习起来。

【 tulaoshi.com - Web开发 】

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"
html xmlns="http://www.w3.org/1999/xhtml"
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
title获取页面高度,窗口高度,滚动条高度等参数值/title
/head

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

body
script language="javascript"
!--
function getPageScroll(){
var yScroll;
if (self.pageYOffset) {
yScroll = self.pageYOffset;
} else if (document.documentElement && document.documentElement.scrollTop){ // Explorer 6 Strict
yScroll = document.documentElement.scrollTop;
} else if (document.body) {// all other Explorers
yScroll = document.body.scrollTop;
}

arrayPageScroll = new Array('',yScroll);
return arrayPageScroll;
}

function getPageSize(){
var xScroll, yScroll;
if (window.innerHeight && window.scrollMaxY) {
xScroll = document.body.scrollWidth;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollheight document.body.offsetheight){ // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}

var windowWidth, windowHeight;
if (self.innerHeight) { // all except Explorer
windowWidth = self.innerWidth;
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}

// for small pages with total height less then height of the viewport
if(yScroll windowHeight){
pageHeight = windowHeight;
document.write("page height is : " + pageHeight + "
");
} else {
pageHeight = yScroll;
document.write("page height is : " + pageHeight + "
");
}

if(xScroll windowWidth){
pageWidth = windowWidth;
document.write("page width is : " + pageWidth + "
");
} else {
pageWidth = xScroll;
document.write("page width is : " + pageWidth + "
");
}

arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
return arrayPageSize;

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

}
--
/script
div style="background:#EBEBEB;text-align:center;height:300px;"
h3script language="javascript"getPageSize()/script/h3
/div
/body
/html
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"
html xmlns="http://www.w3.org/1999/xhtml"
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
title获取页面高度,窗口高度,滚动条高度等参数值/title
/head

body
script language="javascript"
!--
function getPageScroll(){
var yScroll;
if (self.pageYOffset) {
yScroll = self.pageYOffset;
} else if (document.documentElement && document.documentElement.scrollTop){ // Explorer 6 Strict
yScroll = document.documentElement.scrollTop;
} else if (document.body) {// all other Explorers
yScroll = document.body.scrollTop;
}

arrayPageScroll = new Array('',yScroll);
return arrayPageScroll;
}

function getPageSize(){
var xScroll, yScroll;
if (window.innerHeight && window.scrollMaxY) {
xScroll = document.body.scrollWidth;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight document.body.offsetHeight){ // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}

var windowWidth, windowHeight;
if (self.innerHeight) { // all except Explorer
windowWidth = self.innerWidth;
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}

// for small pages with total height less then height of the viewport
if(yScroll windowHeight){
pageHeight = windowHeight;
document.write("page height is : " + pageHeight + "
");
} else {
pageHeight = yScroll;
document.write("page height is : " + pageHeight + "
");
}

if(xScroll windowWidth){
pageWidth = windowWidth;
document.write("page width is : " + pageWidth + "
");
} else {
pageWidth = xScroll;
document.write("page width is : " + pageWidth + "
");
}

arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
return arrayPageSize;

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

}
--
/script
div style="background:#EBEBEB;text-align:center;height:300px;"
h3script language="javascript"getPageSize()/script/h3
/div
/body
/html

来源:http://www.tulaoshi.com/n/20160219/1613786.html

延伸阅读
标签: Web开发
main.htm: html       head          meta  http-equiv='Content-Type'  content='text/html;  charset=gb2312' /          meta  name='author'  c...
标签: Web开发
自适应高度的问题,采用 Div + CSS 进行三列或二列布局时,事先不知道具体高度,只能根据内容的增减自适应高度,要使两列(或三列)的高度相同,用 Table 很容易实现,但采用 Div + CSS 就显得比较麻烦了。按照一般的做法,大都采用背景图填充或 JS 脚本的方法使高度相同,但这些都不是最好的办法,我认为… 下面介绍采用“隐藏容器溢...
标签: Web开发
w3c规范中getElementsByName是按着name属性进行检索的,而MS的IE却是按着id来检索。导致不能得到应该得到的Elements,为适应浏览器,我们可以做一下调整:  一、把需要用getElementsByName的name都加上id,且id和name相同。  二、用一个函数来适应浏览器,代码如下:  代码如下: getElementsByName:function (name)&nb...
自适应高度的问题,采用 Div + CSS 进行三列或二列布局时,事先不知道具体高度,只能根据内容的增减自适应高度,要使两列(或三列)的高度相同,用 Table 很容易实现,但采用 Div + CSS 就显得比较麻烦了。按照一般的做法,大都采用背景图填充或 JS 脚本的方法使高度相同,但这些都不是最好的办法,我认为… 下面介绍采用“隐藏容器溢出”和“...
标签: Web开发
CSS布局自适应高度解决方法 这是一个比较典型的三行二列布局,每列高度(事先并不能确定哪列的高度)的相同,是每个设计师追求的目标,按一般的做法,大多采用背景图填充、加JS脚本的方法使列的高度相同,本文要介绍的是采用容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法来解决列高度相同的问题。 先看代码: #w...

经验教程

709

收藏

26
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部