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

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

原创 2017年12月07日 14:23:09

• 标签：
• js /
• iframe

• 28

两个问题：

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)