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()

子級元素不建議修改父級元素的狀態(顏色,加載順序,更換圖片等),這會導致加載出現一閃一閃的效果，讓人覺得不順暢