js 获取 iframe 页面元素

操作 iframe 必须掌握的父子页面关系及常用的操作方法，理解其中的联系。

<iframe id="myframe" src='<c:url value="/base/server/report/report.do?REPORT_ID=${param.REPORT_ID}"/>' height="100%" width="100%"></iframe>

通过父页面操作子页面

获取 iframe 页面中的元素

操作	javascript	jquery
方式一	document.getElementById(‘myframe’).contentWindow.document.getElementById(‘V_ORGID’).value = 111	$(‘#myframe’).contents().find(‘#V_ORGID’).val(‘111’)
方式二	document.frames[‘myframe’].document.getElementById(‘V_ORGID’).value = 111	$(‘#V_ORGID’, document.frames(‘myframe’).document).val(‘111’)

调用 iframe 页面中的方法

操作	javascript	jquery
方式一	document.getElementById(“myframe”).contentWindow.fn()
方式二	document.frames[“myframe”].fn()

通过子页面操作父页面

获取 iframe 页面中的元素

操作	javascript	jquery
方式一	window.parent.document.getElementById(“ORGID”).value = 111	$(“#ORGID”,parent.document).val(‘111’)

调用 iframe 页面中的方法

操作	javascript	jquery
方式一	window.parent.fn()

通过子页面操作父页面中的其他 iframe 页面

前提：iframe 必须设置了 id。

获取 iframe 页面中的元素

window.frames['id'].document.getElementById()

调用 iframe 页面中的方法

window.frames['id'].fn()

判断 iframe 是否加载完毕

javascript 实现

window.onload = function() {
    let iframe = document.getElementById('myframe')
    if (iframe.attachEvent) {
        // IE
        iframe.attachEvent('onload', function() {
            console.log('iframe加载完毕！')
        })
    } else { // 非IE
        iframe.onload = function() {
            console.log('iframe加载完毕！')
        }
    }
}

jquery 实现

$(function() {
    $('#myframe').load(function() {
        console.log('iframe加载完毕！')
    })
})