js,JQ-iframe父级与子级调用方法

javaScript:

父级调用子级方法必须在iframe加载后调用,所以需要加window.frames['iframe_name'].onload=function(){}或者$('#parent_id').contents().ready(function(){})

• 父级获得子级元素:

window.frames['iframe_name'].document.getElementById('子页面元素id')
//或
doucument.getElementById('iframe_id').contentWindow.document.getElementById('子页面元素id')

• 父级调用子级方法:

window.frames['iframe_name'].childMethod();
//或
document.getElementById('iframe_id').contentWindow.childMethod()

• 父级调用子级元素方法:

window.frames['iframe_name'].document.getElementById('子页面元素id').onclick();
//或
document.getElementById('iframe_id').contentWindow.document.getElementById('子页面元素id').onclick()

• 子级获得父级元素:

parent.document.getElement('父页面元素id')

• 子级调用父级方法:

parent.parentMethod();

• 子级调用父级元素方法:

parent.document.getElementById('父页面元素id').onclick()

---

jQuery

• 父级获得子级元素:

$('#obj_id',window.frames['iframe_name']).prevObject[0].document.getElementById('iframeChild_id')
//或
$('#obj_id').contents().find('#iframeChild_id')

• 父级调用子级方法:

$('#obj_id',window.frames['iframe_name']).prevObject[0].childMethod();
//或
$('#obj_id').contents().prevObject[0].contentWindow.childMethod()

• 父级调用子级元素方法:

$('#obj_id',window.frames['iframe_name']).prevObject[0].document.getElementById('iframeChild_id').click()
//或
$('#obj_id').contents().find('#iframeChild_id').click()

• 子级获得父级元素:

$('#obj_id',parent.document.getElementById('父级元素id')).prevObject

• 子级调用父级方法:

$('#obj_id',parent).prevObject[0].parentMethod()

• 子级调用父级元素方法:

$('#obj_id',parent.document.getElementById('父级元素id')).prevObject.click()

子级元素不建议修改父级元素的状态(颜色,加载顺序,更换图片等),这会导致加载出现一闪一闪的效果，让人觉得不顺畅