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

两个问题：

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

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

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

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

1.父页面获取子页面DOM：

window.frames['iframe-name'].document

简单说明：

上段代码在父页面获取了整个子页面的document

iframe-name是iframe的name属性

测试主流浏览器没有问题

2.子页面获取父页面的DOM：

window.parent.document

上段代码在子页面获取了整个父页面的document

测试主流浏览器没有问题

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)