获取子iframe框架的元素
我们常常遇到使用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框架的元素的更多相关文章
- .NET前后台-JS获取/设置iframe内对象元素并进行数据处理
转载请注明出处:果冻栋吖 这个主要是修改H3BPM一个批量审批的功能时候做的.先看下图: H3自带了批量审批的功能,也就是按钮1,有审批意见3,但是如果3里边不填写内容点击1之后,效果就是表单里边没有 ...
- javascript_获取iframe框架中元素节点的属性值
1. DOM:文档对象模型 [window 对象] 它是一个顶层对象,而不是另一个对象的属性即浏览器的窗口. [document 对象] 该对象是window和frames对象的一个属性,是显示于窗口 ...
- jQuery控制iframe框架内元素
用jQuery在IFRAME里取得父窗口的某个元素的值只好用DOM方法与jquery方法结合的方式实现了 1.在父窗口中操作 选中IFRAME中的所有单选钮$(window.frames[" ...
- JS获取/设置iframe内对象元素、文档的几种方法
1.IE专用(通过frames索引形象定位): document.frames[i].document.getElementById('元素的ID'); 2.IE专用(通过iframe名称形象定位): ...
- 【转】获取/设置IFRAME内对象元素的几种JS方法
1.IE专用(通过frames索引形象定位): document.frames[i].document.getElementById('元素的ID'); 2.IE专用(通过IFRAME名称形象定位): ...
- 关于使用iframe，父元素无法获得子iframe对的元素
首先确定自己写的方法对不对: $(document.getElementById('iframe的ID').contentWindow.document.body).find("要获得的元素 ...
- 获取iframe内的元素
$("#iframeID").contents().find("#index_p") 2获取父窗体的值 $('#father', parent.document ...
- 【学习】如何用jQuery获取iframe中的元素
(我的博客网站中的原文:http://www.xiaoxianworld.com/archives/292,欢迎遇到的小伙伴常来瞅瞅,给点评论和建议,有错误和不足,也请指出.) 说实在的,以前真的很少 ...
- js操作iframe框架时应该屡清楚的一些概念
1.获取iframe的window对象 存在跨域访问限制. iframeElement.contentWindow 兼容 2.获取iframe的document对象 存在跨域访问限制. chrome: ...
随机推荐
- css那些事儿3 列表与浮动
一 列表 列表默认为行内块元素,具有宽高,当一个非块元素是无法应用宽高的,比如a 1 有序列表 有ol li组成,其中li为列表项,列表的ol子元素务必为li元素标签,li子内容支持列表任意嵌套,有 ...
- HDU 2117 Just a Numble
http://acm.hdu.edu.cn/showproblem.php?pid=2117 Problem Description Now give you two integers n m, yo ...
- ICommand接口
WPF 中的命令是通过实现 ICommand 接口创建的.ICommand 的 WPF 实现是 RoutedCommand 类. WPF 中的主要输入源是鼠标.键盘.墨迹和路由命令.更加面向设备的输入 ...
- 单点登录Windows实现
Windows实现步骤: server.xml修改方式 hosts修改方式 CAS客户端配置 CAS配置filter.txt内容如下: <!-- ======================== ...
- 【bzoj2435】[NOI2011]道路修建 树形dp
题目描述 在 W 星球上有 n 个国家.为了各自国家的经济发展,他们决定在各个国家之间建设双向道路使得国家之间连通.但是每个国家的国王都很吝啬,他们只愿意修建恰好 n – 1条双向道路. 每条道路的修 ...
- BZOJ5339：[TJOI2018]教科书般的亵渎——题解
https://www.lydsy.com/JudgeOnline/problem.php?id=5339 https://www.luogu.org/problemnew/show/P4593 小豆 ...
- CF549H：Degenerate Matrix ——题解
https://vjudge.net/problem/CodeForces-549H ———————————————————————— 题目大意:给一个矩阵,每个数可以加任意的数使得该矩阵为退化矩阵( ...
- 2017 ccpc哈尔滨 A题 Palindrome
2017 ccpc哈尔滨 A题 Palindrome 题意: 给一个串\(T\),计算存在多少子串S满足\(S[i]=S[2n−i]=S[2n+i−2](1≤i≤n)\) 思路: 很明显这里的回文串长 ...
- 洛谷 P1516 青蛙的约会 解题报告
P1516 青蛙的约会 题目描述 两只青蛙在网上相识了,它们聊得很开心,于是觉得很有必要见一面.它们很高兴地发现它们住在同一条纬度线上,于是它们约定各自朝西跳,直到碰面为止.可是它们出发之前忘记了一件 ...
- POJ.1797 Heavy Transportation (Dijkstra变形)
POJ.1797 Heavy Transportation (Dijkstra变形) 题意分析 给出n个点,m条边的城市网络,其中 x y d 代表由x到y(或由y到x)的公路所能承受的最大重量为d, ...