iframe 自适应大小

最新推荐文章于 2014-06-12 15:06:22 发布
最新推荐文章于 2014-06-12 15:06:22 发布
阅读量1.3k 收藏 1
点赞数
分类专栏： JQuery 前端相关
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tree3170/article/details/8869568
版权

前提：

W3C标准：

<!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">

全局css：

<style>
html,body{height:100%;width:100%}
iframe{width:100%}
</style>


1.首先控制整个窗口的大小，如果变化，要自适应

var originalWidth  = document.documentElement.clientWidth;
var originalHeight = document.documentElement.clientHeight;
	
window.onresize = function(){
	var _originalWidth = document.documentElement.clientWidth;
	var _originalHeight = document.documentElement.clientHeight
	//if (_originalWidth*_originalHeight!=originalWidth*originalHeight   <= originalWidth ||  _originalHeight <= originalHeight||_originalWidth  > originalWidth ||  _originalHeight > originalHeight){
	if(_originalWidth*_originalHeight != originalWidth*originalHeight){
		$("#clientframe").height(_originalHeight-73);//73:前面iframe的高度
	}
   originalWidth  = _originalWidth;
   originalHeight = _originalHeight;
}


2.控制iframe大小 ，如果窗口变化，要自适应

<tr>
	<td width="100%" height="" id="ClientTD" align="top">
	<iframe src="<%=request.getContextPath()%>/html/com/menu/blank.html" width="100%" height="100%"style="" scrolling="auto" id ="clientframe" frameborder="0" name="clientframe" οnlοad="expression4Firefox(this);getIframeHeight()"></iframe>
	</td>
	</tr>

注意：关于一个document.documentElement.clientWidth为0的问题

原来是W3C的标准在作怪啊
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
如果在页面中添加这行标记的话 在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高）



子iframe获取父iframe高度调整子iframe高度，或者是父iframe根据子iframe高度调整父iframe高度

parent.window.frames['clientframe'].frameElement.style.height;





tree3170
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
iframe 自适应大小实现代码
01-21
A域名下的页面a.html中通过iframe嵌入B域名下的页面b.html,由于b.html的宽度和高度是不可预知而且会变化的,所以需要a.html中的iframe自适应大小. 问题本质: js对跨域iframe访问问题,因为要控制a.html中iframe的...
js跨域问题之跨域iframe自适应大小实现代码
10-29
前几天做公司和开心网合作项目的时候 碰到iframe 跨域自适应的问题刚开始很迷惑 开心网那边技术工程师给我发了一段这样子的代码。
iframe自适应宽高
11-08
这个库允许的高度与同跨域iframe来适应他们所包含的内容的宽度自动调整大小。它最常见的问题与使用iframes提供一系列的功能，其中包括： 高度和宽度大小的iframe内容大小。 作品以多个嵌套的iframe。 跨域iframe域...
多个iframe 加载
Tree3170 的专栏
12-10 2797
遍历iframe，然后加载相应的iframe时，iframe不会是按顺序加载，按我的测试，应该是随机或者并列， for(var i=0;i<iframe.length;i++){ $("#iframe"+i).load(function(){ i++; alert(i); }) } 最终结果：所有的i的长度会是最大值 但是我一定要确定一个iframe都加载完了才能继续执行下一个
JS 特殊字符处理和密码框不能复制粘贴
Tree3170 的专栏
09-27 2539
1.有时候要处理一些特殊字符，不能让别人随意填写，所以可以用这个js ---new RegExp().test()来处理； 2.密码框不能复制粘贴，防止别人用中文字符粘贴进去导致最后不能登录。 var name="#$%"; if(new RegExp("[%,_,+,',',.,`,/,\\,:,=,;,},{,\\],\\[,\",',#,$,@,~,^,&,?,,|,*]"
屏蔽特殊字符，密码框不能复制、粘贴、
Tree3170 的专栏
09-25 1826
密码框不能复制粘贴 fdhjdfi： 特殊字符： if(new RegExp("[%,_,+,',',.,`,/,\\,:,=,;,},{,\\],\\[,\",',#,$,@,~,^,&,?,,|,*]").test(tenantName)){ alert("%,_,+,',',.,`,/,\\,:,=,;,},{,],[,\",'
inpub 不能复制粘贴
Tree3170 的专栏
04-29 1164
<INPUT  class="ecv_input" maxlength="40" name="oldPassword" type=password value='' oncopy="return false" onpaste="return false"  ondragstart="return false" onselectstart="return false">
Jquery ajax获取返回值问题
Tree3170 的专栏
08-28 1015
这个问题我晚上弄了一晚上，然后一直没弄出来，不知是什么问题，今天早上上网一搜，竟然给找到了答案 ，欣喜啊  呵呵 。现在把问题描述一下： 就是我判断一个函数里面的值是否存在，通过jquery  ajax调用，但是在调用函数的时候，因为$.ajax()默认是异步的，所以它会在还没有来得及赋值的 情况下，就去执行其他步骤，导致程序一直执行错误，也就是当我保存没有包含已存在的configid时，它也
obj.offsetHeight与obj.style.height的区别
Tree3170 的专栏
05-02 993
当我们在jsp头部加了W3C的支持后，有些以前的JS会出现取不到值的情况 一、obj.offsetHeight与obj.style.height的区别        我们知道 offsetTop 可以获得 HTML 元素距离上方或外层元素的位置，style.top 也是可以的，二者的区别是：        1、offsetTop 返回的是数字，而 style.top 返回的是
Jquery中对radiobutton、checkbox、dropdownlist等一些基本操作总结
Tree3170 的专栏
08-09 903
最近在写一些JS，但苦于这些东西不是每次都要用，经常容易忘记，搞的每次都要去网上搜集资料，现记下来以备不时之需： radiobutton： Html代码  input id="sc" type="radio" name="Type" value="Service Component" onclick="typeChange()">Service Compone
input 事件
Tree3170 的专栏
11-27 881
1.Input的特殊事件onpopertychange和oninput： 在很多情况下，我们需要监测输入框，比如自动提示等。我们熟知的一些input的按键事件并不能满足我们的需求，特别是在输入法开启的状态下，三个浏览器的具体问题如下： IE：触发keydown和keyup，不触发keypress。能够获得输入值。Firefox：:触发keydown和keypress，不触发keyup。
Iframe自适应高度和拖拽自适应
Tree3170 的专栏
05-20 856
/** * The iframe height self adaption * @param the iframe id */ function selfAdaptionIframeHeight(id){ $("#"+id).load(function(){ var mainheight = $(this).contents().find("body").height(); $(this
js Map List 遍历
Tree3170 的专栏
07-10 831
Map  （exMap:{"name":"abc","sex",'male'}）： 在不知道key的情况下遍历map： 网上说过这种方法： for(var key in exMap){ Console.write("key:"+key+";value:"+exMap[key]);//经我考证，the key is undefined.So the method is not right.
判断浏览器类型及版本
Tree3170 的专栏
05-03 788
一、后台判断浏览器类型： String strHeader=request.getHeader("User-Agent"); boolean isFireFox = false; if(strHeader.indexOf("Firefox")>-1){ isFireFox = true; } IE,FF，Chrome的UserAgent列表
table加scroll bar
Tree3170 的专栏
09-06 755
有时候我们的table过大，撑的整个screen都放不下，导致同一个页面不用的元素之间因为scroll bar的拖动而css不能跟随 其实很简单：Table显示滚动条，要先把table放到一个div中，div的长度和宽度要固定，控制overflow属性为auto
XMLHttpRequest.readyState和HTTP状态response的状态Response.Status
Tree3170 的专栏
05-14 704
一、XMLHttpRequest.readyState: 状态 名称 描述 0 Uninitialized 初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。 1 Open open() 方法已调用，但是 send() 方法未调用。请求还没有被发送。 2 Sent Sen
CSS 半透明
Tree3170 的专栏
06-12 631
半透明div #div1 { margin:0px auto; width:500px; height:370px ; text-align:center; background:url(/jscss/demoimg/wall3.jpg);} #div2 { height:330px; filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5
基于Hog和SVM的行人检测python源码+文档说明
最新发布
08-05
<项目介绍> 这是采用Hog和SVM的行人检测。 步骤 1,运行crop_image 剪裁负样本的图片 2，运行detection.cpp 进行HOG的提取和SVM的训练 3，运行find_save_hardexample训练hardneg 4，运行detection.cpp 生成最终的SVM模型 5，如果需要检测生成模型的xml,可以运训test_mai - 不懂运行，下载完可以私聊问，可远程教学 该资源内项目源码是个人的毕设，代码都测试ok，都是运行成功后才上传资源，答辩评审平均分达到96分，放心下载使用！ 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。 --------
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值