iframe父子页面操作方法大全

为了方便理解，我们先梳理一下结构。

    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")