我们常常遇到使用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. union查询

     select id, uid, money, FROM_UNIXTIME(created) as created, type FROM  (  #type=1是  cjw_finance_bonus ...

  2. shell练习题讲解

    写一个脚本,计算100以内所有的奇数的和以及所有偶数的和,分别显示出来#! /bin/bashsum1=0for i in `seq 1 2 100`do sum1=$[$sum1+$i]doneec ...

  3. 钉钉 E应用 打开分享外链

    钉钉 E应用 打开分享外链 外部链接 https://open-doc.dingtalk.com/microapp/dev https://open-doc.dingtalk.com/microapp ...

  4. BZOJ 1789 Y形项链(思维)

    这题类似于1787,最后的节点一定是两点的LCA,这里也就是两个字符串的最长公共前缀. # include <cstdio> # include <cstring> # inc ...

  5. BZOJ 1082 栅栏(二分+DFS剪枝)

    首先,长度短的木板一定比长度长的木板容易得到,因此若要得到最多的木板,它们必定是所有木板中最短的——可以对木板排序后二分答案(用k表示). 判断是否合法就用搜索,但数据有点大,要用到两个剪枝.一个是若 ...

  6. 【bzoj3672】[Noi2014]购票 斜率优化dp+CDQ分治+树的点分治

    题目描述  给出一棵以1为根的带边权有根树,对于每个根节点以外的点$v$,如果它与其某个祖先$a$的距离$d$不超过$l_v$,则可以花费$p_vd+q_v$的代价从$v$到$a$.问从每个点到1花费 ...

  7. 【bzoj2274】[Usaco2011 Feb]Generic Cow Protests dp+树状数组

    题目描述 Farmer John's N (1 <= N <= 100,000) cows are lined up in a row andnumbered 1..N. The cows ...

  8. 2018牛客多校第四场 J.Hash Function

    题意: 给出一个已知的哈希表.求字典序最小的插入序列,哈希表不合法则输出-1. 题解: 对于哈希表的每一个不为-1的数,假如他的位置是t,令s = a[t]%n.则这个数可以被插入当且仅当第s ~ t ...

  9. Android Bitmap和Drawable互转及使用BitmapFactory解析图片流

    一.Bitmap转Drawable Bitmap bmp=xxx; BitmapDrawable bd=new BitmapDrawable(bmp); 因为BtimapDrawable是Drawab ...

  10. 【BZOJ4892】DNA(后缀数组)

    [BZOJ4892]DNA(后缀数组) 题面 BZOJ 洛谷 题解 看到这道题目,我第一反应是\(FFT\)??? 然后大力码出了一个\(FFT\) 就像这样 #include<iostream ...