父子页面间元素获取与方法调用技术总结

一、jQuery父子页面间元素获取与方法调用

在前后端分离的项目中，父子页面间的元素获取与方法调用是常见但富有挑战性的操作。以下将详细介绍几种常用方法。

1. 父页面获取子页面元素
    
通过jQuery可以方便地从父页面获取子页面的元素。主要方法包括：
    $("#iframeID").contents().find("#子页面控件ID").click();    
例如：$("#ifm").contents().find("#iBtnOk").click();
    
这里的ifm是子页面的iframe标签ID，iBtnOk是子页面中需要操作的按钮ID。
    
2. 父页面调用子页面方法
    
如果需要调用子页面的JavaScript方法，可以通过以下方式实现：
    $("#iframeID")[0].contentWindow.iframe方法名称();    
例如：$("#ifm")[0].contentWindow().iClick();
    
其中ifm是子页面的iframe标签ID，iClick是子页面定义的方法名。
    
3. 子页面获取父页面元素
    
在某些场景下，子页面也需要获取父页面的元素。可以通过以下方式实现：
    $("#父页面元素ID", parent.document);    
例如：$("#pBtnOk", parent.document).click();
    
这里的pBtnOk是父页面上的元素ID。
    
二、原生JavaScript父子页面间元素获取与方法调用
    
除了jQuery，还可以通过原生JavaScript实现父子页面间的元素获取与方法调用。以下是相关方法：
    
1. 子页面调用父页面方法
    
可以通过parent对象直接调用父页面的方法。例如：
    parent.pClick();    
其中pClick是父页面定义的方法名。
    
2. 子页面获取父页面元素
    
要获取父页面的元素，可以使用window.parent.document.getElementById("元素ID");。例如：
    window.parent.document.getElementById("pBtnOk");    
这里的pBtnOk是父页面上的元素ID。