上级页面jquery 如何调用 子级页面jquery 方法

在Web开发中，有时会遇到需要从一个页面（通常称之为父页面或上级页面）调用另一个嵌入在iframe中的子页面的jQuery方法的情况。然而，出于安全考虑，浏览器通常会限制不同域之间的JavaScript交互（同源策略），这意味着直接调用另一个页面的方法是不被允许的。但如果你控制了父页面和子页面，并且它们都位于同一个域中，那么可以通过以下几种方式实现调用：

1. **使用iframe的contentWindow属性：**
如果子页面和父页面位于同一域内，父页面可以通过iframe的contentWindow属性获取子页面的窗口对象，进而调用子页面中的方法。

   // 假设iframe的id为'childPage'
   $('#childPage').contents().find('body').append('<script>子页面函数();</script>');

2. **在子页面中暴露一个全局函数：**
在子页面中，可以定义一个全局函数，父页面通过iframe的contentWindow调用该函数。

子页面代码：

   window.showChildPageAlert = function() {
       alert("这是子页面的方法！");
   };

父页面代码：

   $('#childPage').contents().find('body').append('<script>showChildPageAlert();</script>');

3. **通过postMessage进行跨文档通信：**
HTML5引入了window.postMessage方法允许跨源通信。父页面可以发送消息给子页面，子页面在接收到消息后执行相应的函数。

父页面代码：

   var iframe = $('#childPage')[0].contentWindow;
   iframe.postMessage('需要执行的函数名', '*'); // '*'表示允许任何域发送消息

子页面代码：

   window.addEventListener("message", function(event) {
       if (event.source !== window.parent) return; // 确保消息来自父页面
       if (event.data === '需要执行的函数名') {
           子页面特定的函数();
       }
   }, false);

这些方法都是基于同源策略的限制，因此前提是父页面和子页面都必须在同一个域中。如果存在跨域问题，则需要服务器端支持，例如使用CORS（跨源资源共享）策略。