js to get iframe page elements

To operate the iframe, you must master the parent-child page relationship and common operation methods, and understand the connection.

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

Operate child pages through parent pages

Get the elements in the iframe page

operate	javascript	jquery
method one	document.getElementById(‘myframe’).contentWindow.document.getElementById(‘V_ORGID’).value = 111	$(‘#myframe’).contents().find(‘#V_ORGID’).val(‘111’)
way two	document.frames[‘myframe’].document.getElementById(‘V_ORGID’).value = 111	$(‘#V_ORGID’, document.frames(‘myframe’).document).val(‘111’)

Call the method in the iframe page

operate	javascript	jquery
method one	document.getElementById(“myframe”).contentWindow.fn()
way two	document.frames[“myframe”].fn()

Manipulate the parent page through the child page

Get the elements in the iframe page

operate	javascript	jquery
method one	window.parent.document.getElementById(“ORGID”).value = 111	$(“#ORGID”,parent.document).val(‘111’)

Call the method in the iframe page

operate	javascript	jquery
method one	window.parent.fn()

Operate other iframe pages in the parent page through subpages

Premise: The iframe must have an id set.

Get the elements in the iframe page

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

Call the method in the iframe page

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

Determine whether the iframe is loaded

javascript implementation

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 implementation

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