JS/jQuery--iframe框架内外元素的操作

两个问题:

  1. 如何在父页面操作iframe框架内的元素?
  2. 如何在iframe框架内操作父页面的元素?

解决上面两个问题的关键是,如何互相获取两者之间的document文档

如何在父页面操作iframe框架内的元素?

1.父页面获取子页面DOM: window.frames['iframe-name'].document

简单说明:

  1. 上段代码在父页面获取了整个子页面的document
  2. iframe-name是iframe的name属性
  3. 测试主流浏览器没有问题

2.子页面获取父页面的DOM: window.parent.document

  1. 上段代码在子页面获取了整个父页面的document
  2. 测试主流浏览器没有问题

3.几个注意事项

在获取子页面的时候往往需要onload的事件,简单的理解就是,如果iframe框架里边的内容加载没有完成,你是获取不到任何内容的

    //利用了Jquery.load方法
    $('#child').load(function(){
                $('#child_div',window.frames['child'].document).click(function(){
                    alert('加载完成');
                    $(this).css('background','red');
                });
    });

关于 (‘selector’[,context]) 第二个参数表示,该选择器的上下文

$('#child_div',window.frames['child'].document)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值