这个问题其实是iframe跨上下文访问的典型场景，咱们一步步来搞定它：

为什么你的原有代码无效？ #

你之前写的$(".result").load(...)是在iframe的上下文里执行的，这里的$指向的是iframe页面的jQuery，所以它只会去查找iframe内部的.result元素，自然没法操作父页面的内容啦。

最简单的解决方案（依赖父页面的jQuery） #

因为是同域，浏览器允许iframe直接访问父窗口的对象，咱们只需要明确指定用父页面的jQuery上下文来选择元素就行：

在iframe的脚本里写：

$(document).ready(function() {
  $('.button').click(function() {
    // 用parent.$获取父页面的jQuery对象，再操作父页面的.result元素
    parent.$(".result").load("main.php .result");
  });
});

• parent是浏览器提供的原生对象，指向父窗口的window，同域下可以直接访问
• main.php .result里的后缀是jQuery load方法的筛选器，会自动加载main.php页面中所有.result元素的内容，替换掉父页面当前的.result元素

不依赖父页面jQuery的方案（原生JS+iframe内的jQuery） #

如果父页面没引入jQuery，也可以用原生JS先获取父页面的元素，再通过AJAX获取内容替换：

$(document).ready(function() {
  $('.button').click(function() {
    // 用原生JS获取父页面的所有.result元素
    const parentResultElements = parent.document.querySelectorAll(".result");
    
    // AJAX请求父页面内容
    $.get("main.php", function(pageContent) {
      // 从返回的页面中提取新的.result元素
      const newResultContents = $(pageContent).find(".result");
      
      // 逐个替换父页面的元素内容
      parentResultElements.forEach((el, index) => {
        $(el).html(newResultContents.eq(index).html());
      });
    });
  });
});

额外注意事项 #

• 一定要确保父页面和iframe是完全同域的（协议、域名、端口都必须一致），不然浏览器的同源策略会阻止跨上下文访问
• 如果你的.button是动态生成的（比如后期通过JS添加的），建议用事件委托来绑定点击事件，避免绑定失效：

  $(document).on('click', '.button', function() {
    parent.$(".result").load("main.php .result");
  });
  

内容的提问来源于stack exchange，提问作者Pepe