博客

js 获取 iframe 页面元素

  • Post author:
  • Post category:其他


操作 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加载完毕！')
    })
})


版权声明：本文为godread_cn原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。