通过JavaScript获取iframe中元素的值

需求分析

假如我们项目有a,b两个HTML,a.html 如何获取到 b.html中元素的值呢?

具体实现

b页面有个 input

<input name="hh" type="text">

a页面HTML代码:

<!-- HTML代码, src="指向地址" -->
<!-- 如果不需要b页面展示在a页面, display: none; 添加CSS代码隐藏掉 -->
<iframe id="b" src="b.html" style="display: none;"></iframe>

a页面JavaScript代码:

//为什么用 window.onload 下面会详解
window.onload = function () {
    //先取到iframe         
    var b= document.getElementById("b");
    //通过iframe取其b.html上的值           
    var hh= b.contentDocument.getElementsByName("hh")[0].value;
    //弹出消息, 查看正确与否          
    alert(hh);

}

window.onload:页面所有资源加载完毕执行
$(document).ready(function(){})(相当于jQuery中的$(function(){}) ):页面的DOM节点创建完毕执行
如果使用 $(document).ready(function(){}) 会取不到值,为什么,答案很明显了:
iframe 节点虽然创建完毕,但是页面资源没加载完毕,但是这时候JS代码马上执行,结果就是取不到值,而 window.onload 会等页面资源全部加载完毕再执行JS代码
感谢阅读,转载或引用请标明链接

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值