博客

iframe父子页面操作方法大全

  • Post author:
  • Post category:其他


为了方便理解，我们先梳理一下结构。
1.声明的函数方法绑定在window对象上。
2.dom元素在window.document下（包含iframe元素）。
window—–document——dom ( iframe —- window … )
|
function

知道这两点就方便多了，本质是获取相应页面的window与document对象

iframe获取父页面window 

window.parent

父页面获取iframe window 

//js
document.getElementById('iframeBack').contentWindow;
window.frames['iframeID'].contentWindow;  
window[iframeID].contentWindow;


//jq
没找到可通过 $("#iframeID")[0].contentWindow
//获取document
$("#iframeID").contents()



iframe操作父页面

调用函数 

parent.functionName();





调用元素

 

 // js
window.parent.document.getElementById("id");
 // jq
$("#aa",window.parent.document);

父页面操作iframe

调用函数 

//jq
$("#iframeID")[0].contentWindow.functionName();
//js
document.getElementById('iframeID').contentWindow.functionName();
window[iframeID].contentWindow.functionName();

调用元素 

//jq
$("#iframeID").contents().find("#btn");
$("#ID",window[iframeID].contentDocument)

//js
document.getElementById('iframeID').contentWindow.document.getElementById("id")
document.getElementById('iframeID').contentDocument.getElementById("id")
window[iframeID].contentDocument.getElementById("id")


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