jQuery实现跨域iframe接口方法调用

下面是详细讲解jQuery实现跨域iframe接口方法调用的完整攻略。

什么是跨域?

在 Web 开发中，浏览器由于安全限制，只允许与同源（相同协议、主机名、端口号）的服务器进行通信。如果在浏览器中向不同地址发送请求，就会被拦截，这就是所谓的跨域。

为什么需要跨域iframe接口方法调用？

在一些特殊的业务场景中，我们需要在一个网页中嵌入一个iframe，来加载不同的业务页面。但这些业务页面并不属于同源，无法直接在父页面中访问其中的数据或方法。由于这些业务页面是在iframe中异步加载的，又无法直接获取是否加载完成的状态，因此需要提供一种方法来让父页面能够调用子页面中的方法，并获取到想要的数据。

jQuery实现跨域iframe接口方法调用的步骤

1. 子页面中定义接口方法

在子页面中定义需要暴露给父页面的接口方法，比如：

window.childMethod = function (params) {
  console.log(params);
  return '子页面接收到的数据：' + params;
}

2. 父页面中创建iframe

由于 iframe 是在父页面中异步加载的，因此需要在父页面中等待 iframe 加载完成后，才能进行接口方法调用。可以通过 jQuery 的 .load() 方法来实现：

<iframe id="iframe-test" src="http://www.example.com"></iframe>

$('#iframe-test').load(function () {
  console.log('IFRAME LOADED');
});

3. 父页面中获取 iframe 内部 window 对象

由于 iframe 是在父页面中异步加载的，因此在 .load() 事件中可以获取 iframe 所在的 window 对象：

$('#iframe-test').load(function () {
  var ifr = document.getElementById('iframe-test');
  var contentWindow = ifr.contentWindow;
  console.log(contentWindow);
});

4. 父页面中调用 iframe 内部方法

通过获取到 iframe 所在的 window 对象，就可以在父页面中调用 iframe 内部的方法：

$('#iframe-test').load(function () {
  var ifr = document.getElementById('iframe-test');
  var contentWindow = ifr.contentWindow;
  var res = contentWindow.childMethod('父页面调用子页面接口方法');
  console.log(res);
});

示例说明

示例1：父页面调用子页面接口方法，获取数据

下面是一个完整的示例代码：

子页面（ http://child.example.com ）：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Child Page</title>
</head>
<body>
  <script>
    window.childMethod = function (params) {
      console.log(params);
      return '子页面接收到的数据：' + params;
    }
  </script>
</body>
</html>

父页面：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Parent Page</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <iframe id="iframe-test" src="http://child.example.com"></iframe>
  <script>
    $('#iframe-test').load(function () {
      var ifr = document.getElementById('iframe-test');
      var contentWindow = ifr.contentWindow;
      var res = contentWindow.childMethod('父页面调用子页面接口方法');
      console.log(res);
    });
  </script>
</body>
</html>

在浏览器中打开父页面，控制台输出如下：

子页面接收到的数据：父页面调用子页面接口方法

说明父页面成功调用了子页面的接口方法。

示例2：子页面调用父页面中的方法

在实际开发过程中，有时候需求并不仅仅是让父页面调用子页面的方法，还需要让子页面能够调用父页面中的方法。这种情况下，需要在父页面中定义一个全局方法，并把当前 window 对象传给子页面。子页面可以通过这个 window 对象来调用父页面中的方法。

下面是修改后的示例代码：

子页面 ( http://child.example.com )：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Child Page</title>
  <script>
    window.onload = function () {
      var parentWindow = parent;
      parentWindow.parentMethod('子页面调用了父页面的方法');
    }
  </script>
</head>
<body>

</body>
</html>