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

2016-02-19 16:59 2 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

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 + "
");
}

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

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;

}
--
/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;
}

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

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 + "
");
}

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

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;

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

来源:https://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开发
w3c规范中getElementsByName是按着name属性进行检索的,而MS的IE却是按着id来检索。导致不能得到应该得到的Elements,为适应浏览器,我们可以做一下调整:  一、把需要用getElementsByName的name都加上id,且id和name相同。  二、用一个函数来适应浏览器,代码如下:  代码如下: getElementsByName:function (name)&nb...
标签: Web开发
自适应高度的问题,采用 Div + CSS 进行三列或二列布局时,事先不知道具体高度,只能根据内容的增减自适应高度,要使两列(或三列)的高度相同,用 Table 很容易实现,但采用 Div + CSS 就显得比较麻烦了。按照一般的做法,大都采用背景图填充或 JS 脚本的方法使高度相同,但这些都不是最好的办法,我认为… 下面介绍采用“隐藏容器溢...
自适应高度的问题,采用 Div + CSS 进行三列或二列布局时,事先不知道具体高度,只能根据内容的增减自适应高度,要使两列(或三列)的高度相同,用 Table 很容易实现,但采用 Div + CSS 就显得比较麻烦了。按照一般的做法,大都采用背景图填充或 JS 脚本的方法使高度相同,但这些都不是最好的办法,我认为… 下面介绍采用“隐藏容器溢出”和“...
标签: Web开发
先看这样一个例子: !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" c / titleDIV高度无法自适应/title style type="text/css" #all {   width:240px;   padding:10...

经验教程

905

收藏

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