JS 中根据iframe子页面自动iframe高度
注意:为使页面有更好的兼容性,在使用以下代码前,请将aspx页中头部的<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">删除,至于居中情况结合<center> …… </center>标签来完成
在实际的项目进行中,很多地方可能由于历史原因不得不去使用iframe,包括目前正火热的应用开发也是如此。
随之而来的就是在实际使用iframe中,会遇到iframe高度的问题,由于被嵌套的页面长度不固定而显示出来的滚动条,不仅影响美观,还会对用户操作带来不便。于是自动调整iframe的高度就成为本文的重点。
采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域、跨域两种情况。
同域时Iframe高度自适应
下面的代码兼容IE/Firefox浏览器,控制id为“iframeid”的iframe的高度,通过JavaScript取得被嵌套页面最终高度,然后在主页面进行设置来实现。
代码如下,可复制。另外,请注意此解决方案仅供同域名下使用。
<script type="text/javascript">
function SetCwinHeight(){
var iframeid=document.getElementById("iframeid"); //iframe id
if (document.getElementById){
if (iframeid && !window.opera){
if (iframeid.contentDocument && iframeid.contentDocument.body.offsetHeight){
iframeid.height = iframeid.contentDocument.body.offsetHeight;
}else if(iframeid.Document && iframeid.Document.body.scrollHeight){
iframeid.height = iframeid.Document.body.scrollHeight;
}
}
}
}
</script>
<iframe width="100%" id="iframeid" onload="Javascript:SetCwinHeight()" height="" frameborder="" src="kimi.php"></iframe>
代码来自http://www.ccvita.com/376.html
方法2
在网页<body>标签之前插入以下代码:
<script language="javascript">
function turnHeight(iframe)
{
var frm = document.getElementById(iframe);
var subWeb = document.frames ? document.frames[iframe].document : frm.contentDocument;
if(frm != null && subWeb != null)
{ frm.height = subWeb.body.scrollHeight + 20;}
}
</script>
调用代码如下:
<IFRAME id=iframe1 src="/main/sf.php" frameBorder=0 width="986" scrolling=no onload="turnHeight('iframe1');" height="100%"></IFRAME>
这样就能解决火狐iframe自适应高度的问题,而且兼容IE。
注意,iframe页面中的元素,不能使用float属性和display属性,否则在火狐中获取到的iframe高度将为0,导致自适应高度失败。
JS 中根据iframe子页面自动iframe高度的更多相关文章
- JS中iframe子页面与父页面之间通信
iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同. 一.同域下父子页面的通信 父页面parent.html <html> <head& ...
- js 在iframe子页面获取父页面元素,或在父页面 获取iframe子页面的元素的几种方式
用JS或jquery访问页面内的iframe,兼容IE/FF 注意:框架内的页面是不能跨域的! 假设有两个页面,在相同域下. index.html 文件内含有一个iframe: XML/HTML代码 ...
- iframe子页面与父页面元素的访问以及js变量的访问
1.子页面访问父页面元素 parent.document.getElementById('id')和document相关的方法都可以这样用 2.父页面访问子页面元素 document.getEle ...
- Js获取iframe子页面全局变量
项目中通过iframe内嵌了一个子页面,子页面定义了一些全局变量,父页面需要获取子页面的全局变量,做了一些测试(我的环境IE10和Firefox32.0.3),得出如下结论: IE下: window. ...
- js之iframe子页面与父页面通信
iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同. 一.同域下父子页面的通信 父页面parent.html <html> <head& ...
- Js动态获取iframe子页面的高度////////////////////////zzzz
Js动态获取iframe子页面的高度 Js动态获取iframe子页面的高度总结 问题的缘由 产品有个评论列表引用的是个iframe,高度不固定于是引发这个总结. 方法1:父级页面获取子级页面的高度 ...
- 父子页面之间元素相互操作(iframe子页面)
js/jquery获取iframe子页面中元素的方法: 一.使用window.frames["iframe的ID"]获取元素 window.onload = function() ...
- CRM 2016 IFrame 子页面执行 父页面函数
CRM 中定义以下函数: windows.parent.functionname(){ //do somethion } IFrame 子页面调用 JS: windows.parent.functio ...
- iframe子页面position的fixed
前言: 首先说一说我昨天天的苦逼经历.中午吃饭时一同事跟我说,他做的项目嵌套iframe后,子页面的position设置fixed失效了. 经过反复询问,得知他用了两层iframe,再加上最外的父页面 ...
随机推荐
- XML 配置里的 Bean 自动装配
在XML文件中,先看一下下面的代码: <bean id="student" class="com.jeremy.spring.beans.student" ...
- 基于spring的shiro配置
shiro是一个特别简单,易用的框架,在此记录一下shiro的使用配置. 首先,创建四张表:user role user_role permission,分别为用户.角色.用户与角色关系表和权限 ...
- Buffer Data
waylau/netty-4-user-guide: Chinese translation of Netty 4.x User Guide. 中文翻译<Netty 4.x 用户指南> h ...
- Big Data资料汇总
整理和翻新一下自己看过和笔记过的Big Data相关的论文和Blog Streaming & Spark In-Stream Big Data Processing Discretized S ...
- Spark 源码分析 -- task实际执行过程
Spark源码分析 – SparkContext 中的例子, 只分析到sc.runJob 那么最终是怎么执行的? 通过DAGScheduler切分成Stage, 封装成taskset, 提交给Task ...
- pymsql与ORM--python操作MySQL之利器
pymsql 原生模块 pymsql是python中操作MySQL的模块,其使用方法和MySQLdb几乎相同. 下载安装 pip3 install pymysql 使用操作 1.执行SQL impor ...
- TestLink安装手册
环境准备 系统CentOS Linux release 7.3.1611 (Core) 搭建LAMP所需的集成包 xampp-linux-x64-7.2.0-0-installer.run 下载地址 ...
- ovn-architecture 摘要
OVN架构图如下所示: 1.OVN Southbound Database由以下三种数据构成: Physical Network(PN)table用于确定如何到达hypervisor以及其他node ...
- django-luffycity-购物车接口
一 基本功能 -添加购物车 -详见代码 -修改课程价格策略 -put或者patch {"course_id": "1", "policy_id&qu ...
- 可能引起「We Were Unable to Load Disqus」错误的一种情况分析
今天想往Octopress里加评论,之前看了网上的教程,应该是简单的事情,因为Octopress本来为你准备好了评论插件Disqus的代码,只需要去Disqus注册个帐号,然后在_config.yml ...