我们常常遇到使用iframe框的时候，该iframe框不能根据自己内部的内容撑起来的这种问题

必要条件：不能在跨域的情况下。。。本地可以放到localhost下进行测试

//父页面index.html页面

<iframe id="ifr" src="iframe1.html" frameborder="0" width="100%" name="iframe1"></iframe>

//框架iframe.html

<body>

    <div id="btn1">

        我是iframe1的内容<br/>我是iframe1的内容<br/>我是iframe1的内容<br/>我是iframe1的内容<br/>我是iframe1的内容<br/>我是iframe1的内容<br/>我是iframe1的内容<br/>我是iframe1的内容<br/>我是iframe1的内容<br/>我是iframe1的内容<br/>我        是iframe1的内容<br/>我是iframe1的内容<br/>我是iframe1的内容<br/>我是iframe1的内容<br/>

    </div>

</body>

如何 获取子iframe框 的元素呢？？

window.frames['iframe1'].document.getElementById('btn1');//获取name为iframe1的btn1

//比如你可以给它添加事件：

window.frames['iframe1'].document.getElementById('btn1').onclick = function(){

    alert(1)

}

注意 要将代码放到window.onload = function(){...}里，否则因为没有加载完全dom节点会报错

如何 获取父iframe框 的元素呢？？

parent.document.getElementById('click-btn').onclick = function() {

		console.log('打印父元素中点击的节点内容：'+ this.innerHTML);

	}//在iframe框中获取父页面的节点

最后，让子iframe框架高度自适应代码：

 // 计算页面的实际高度，iframe高度自适应

  function calcPageHeight(doc) {

      var cHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight)

      var sHeight = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight)

      var height  = Math.max(cHeight, sHeight)

      return height

  }

  var ifr = document.getElementById('ifr')

  ifr.onload = function() {

      var iDoc = ifr.contentDocument || ifr.document

      var height = calcPageHeight(iDoc)

      ifr.style.height = height + 'px'

  }

获取子iframe框架的元素的更多相关文章

  1. .NET前后台-JS获取/设置iframe内对象元素并进行数据处理

    转载请注明出处:果冻栋吖 这个主要是修改H3BPM一个批量审批的功能时候做的.先看下图: H3自带了批量审批的功能,也就是按钮1,有审批意见3,但是如果3里边不填写内容点击1之后,效果就是表单里边没有 ...

  2. javascript_获取iframe框架中元素节点的属性值

    1. DOM:文档对象模型 [window 对象] 它是一个顶层对象,而不是另一个对象的属性即浏览器的窗口. [document 对象] 该对象是window和frames对象的一个属性,是显示于窗口 ...

  3. jQuery控制iframe框架内元素

    用jQuery在IFRAME里取得父窗口的某个元素的值只好用DOM方法与jquery方法结合的方式实现了 1.在父窗口中操作 选中IFRAME中的所有单选钮$(window.frames[" ...

  4. JS获取/设置iframe内对象元素、文档的几种方法

    1.IE专用(通过frames索引形象定位): document.frames[i].document.getElementById('元素的ID'); 2.IE专用(通过iframe名称形象定位): ...

  5. 【转】获取/设置IFRAME内对象元素的几种JS方法

    1.IE专用(通过frames索引形象定位): document.frames[i].document.getElementById('元素的ID'); 2.IE专用(通过IFRAME名称形象定位): ...

  6. 关于使用iframe，父元素无法获得子iframe对的元素

    首先确定自己写的方法对不对: $(document.getElementById('iframe的ID').contentWindow.document.body).find("要获得的元素 ...

  7. 获取iframe内的元素

    $("#iframeID").contents().find("#index_p") 2获取父窗体的值 $('#father', parent.document ...

  8. 【学习】如何用jQuery获取iframe中的元素

    (我的博客网站中的原文:http://www.xiaoxianworld.com/archives/292,欢迎遇到的小伙伴常来瞅瞅,给点评论和建议,有错误和不足,也请指出.) 说实在的,以前真的很少 ...

  9. js操作iframe框架时应该屡清楚的一些概念

    1.获取iframe的window对象 存在跨域访问限制. iframeElement.contentWindow 兼容 2.获取iframe的document对象 存在跨域访问限制. chrome: ...

随机推荐

  1. XML 反序列化成对象，绑定到CheckBoxList控件

    1.前台 <div class="control-group"> <label class="control-label"> 导航名称: ...

  2. oracle怎样查询索引的使用情况

    查询用户的索引select index_name,table_name,tablespace_name, index_type,uniqueness , status from dba_indexes ...

  3. 【ADO.NET】SqlBulkCopy批量添加DataTable

    使用事务和SqlBulkCopy批量插入数据 SqlBulkCopy是.NET Framework 2.0新增的类,位于命名空间System.Data.SqlClient下,主要提供把其他数据源的数据 ...

  4. java session特性

    1.当前浏览器不关闭 则一直有效 servlet就能取到值(未设置过期时间情况下 或者在过期的时间范围内)  算成一次会话 再次会话内多个请求都能获得session 2.session保存在服务端,通 ...

  5. BZOJ4196：[NOI2015]软件包管理器——题解

    http://www.lydsy.com/JudgeOnline/problem.php?id=4196 https://www.luogu.org/problemnew/show/P2146 你决定 ...

  6. HDOJ(HDU).1412 {A} + {B} (STL SET)

    HDOJ(HDU).1412 {A} + {B} (STL SET) 点我挑战题目 题意分析 大水题,会了set直接用set即可. 利用的是set的互异性(同一元素有且仅有一项). #include ...

  7. MySQL基础原创笔记（二）

    表索引关键字:PRI primary key 表示主键,唯一 写法: id bigint(20) unsigned primary key not null ,uni UNIQUE 表示唯一 id b ...

  8. 阿里云学生机——Mysql配置---教小白入门篇

    首先,我的学生机默认配置为:CentOS 7.2 64位 + Tomcat 8 + Jdk8 + MySQL5.7.16 扩展:Linux 如何查看 MySQL 版本号----使用命令 mysql - ...

  9. Golang命名规范和开发规范

    目录 命名 文件命名 package 变量 常量 接口 结构体 方法 注释 README 命名 文件命名 文件命名一律采用小写,不用驼峰式,尽量见名思义,看见文件名就可以知道这个文件下的大概内容. 其 ...

  10. 在局域网中基于Windows文件共享的git环境搭建

    本文的思想是在局域网中用一台电脑作为服务器,在其中建立一个文件夹,作为总的公开版本库.然后将这个文件夹共享,使其他客户机都可以访问,从而进行代码的管理. 一.下载安装文件 1.git核心: git-f ...