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
方法 1	document.getElementById('myframe').contentWindow.document.getElementById('V_ORGID').value = 111	$('#myframe').contents().find('#V_ORGID').val('111')
方法2	document.frames['myframe'].document.getElementById('V_ORGID').value = 111	$('#V_ORGID', document.frames('myframe').document).val('111')

iframe ページでメソッドを呼び出す

操作する	JavaScript	jQuery
方法 1	document.getElementById(“myframe”).contentWindow.fn()
方法2	document.frames[“myframe”].fn()

子ページを通じて親ページを操作する

iframe ページ内の要素を取得する

操作する	JavaScript	jQuery
方法 1	window.parent.document.getElementById(“ORGID”).value = 111	$(“#ORGID”,parent.document).val('111')

iframe ページでメソッドを呼び出す

操作する	JavaScript	jQuery
方法 1	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加载完毕！')
    })
})