揭秘 iframe 里的秘密：轻松实现跨域方法调用，突破技术限制！

引言

iframe 是 HTML 中用于在当前页面中嵌入另一个 HTML 页面的元素。然而，由于浏览器的同源策略，iframe 中嵌入的页面与主页面之间无法直接进行 JavaScript 交互，这给跨域通信带来了技术限制。本文将揭秘 iframe 里的秘密，介绍几种轻松实现跨域方法调用的方法，帮助开发者突破这些技术限制。

同源策略

同源策略是浏览器的一种安全措施，它限制了从一个源加载的文档或脚本如何与另一个源的资源进行交互。这里的“源”由协议（protocol）、域名（domain）和端口（port）组成。当两个页面的协议、域名和端口都相同时，它们被认为是同源的。

在默认情况下，同源策略禁止以下操作：

向另一个源的文档写入；
获取另一个源的文档内容；
调用另一个源的函数。

跨域方法调用

尽管同源策略限制了 iframe 与主页面之间的交互，但我们可以通过以下几种方法实现跨域方法调用：

1. 使用 postMessage

postMessage 方法允许来自不同源的窗口相互通信。简单来说，一个窗口可以向另一个窗口发送消息，另一个窗口可以监听这些消息。

以下是一个使用 postMessage 实现跨域方法调用的示例：

主页面 (index.html):

<!DOCTYPE html>
<html>
<head>
    <title>主页面</title>
</head>
<body>
    <iframe src="https://example.com/iframe.html" id="myIframe"></iframe>
    <script>
        var iframe = document.getElementById('myIframe');
        iframe.onload = function() {
            iframe.contentWindow.postMessage('Hello, iframe!', 'https://example.com');
        };
    </script>
</body>
</html>

iframe 页面 (iframe.html):

<!DOCTYPE html>
<html>
<head>
    <title>Iframe 页面</title>
</head>
<body>
    <script>
        window.addEventListener('message', function(event) {
            if (event.origin !== 'https://example.com') {
                return;
            }
            console.log('Received message:', event.data);
        });
    </script>
</body>
</html>

2. 使用 JSONP

JSONP（JSON with Padding）是一种在客户端和服务器之间进行跨域通信的技术。它利用了 <script> 标签的 src 属性可以跨域请求资源的特性。

以下是一个使用 JSONP 实现跨域方法调用的示例：

主页面 (index.html):

<!DOCTYPE html>
<html>
<head>
    <title>主页面</title>
</head>
<body>
    <iframe src="https://example.com/iframe.html" id="myIframe"></iframe>
    <script>
        var iframe = document.getElementById('myIframe');
        iframe.onload = function() {
            var script = document.createElement('script');
            script.src = 'https://example.com/jsonp.js';
            iframe.contentDocument.body.appendChild(script);
        };
    </script>
</body>
</html>

服务器端 (server):

// 假设服务器端有一个名为 jsonp.js 的文件
var data = {
    message: 'Hello, iframe!'
};

// 将数据转换为 JSON 字符串
var jsonStr = JSON.stringify(data);

// 将 JSON 字符串包装在 <script> 标签中
var scriptStr = '<script type="text/javascript">' + jsonStr + '</script>';

// 将包装后的字符串发送给客户端
response.writeHead(200, {'Content-Type': 'text/javascript'});
response.end(scriptStr);

客户端 (iframe.html):

<!DOCTYPE html>
<html>
<head>
    <title>Iframe 页面</title>
</head>
<body>
    <script>
        window.onload = function() {
            var script = document.createElement('script');
            script.src = 'https://example.com/jsonp.js';
            document.body.appendChild(script);
        };
    </script>
</body>
</html>

3. 使用 CORS

CORS（Cross-Origin Resource Sharing）是一种允许跨源请求的技术。它通过在服务器端设置相应的 HTTP 响应头来允许或拒绝跨域请求。

以下是一个使用 CORS 实现跨域方法调用的示例：

服务器端 (server):

// 假设服务器端有一个名为 cors.js 的文件
var express = require('express');
var app = express();

app.use(express.static('public'));

app.get('/cors', function(req, res) {
    res.header('Access-Control-Allow-Origin', '*');
    res.send('Hello, CORS!');
});

app.listen(3000);

主页面 (index.html):

<!DOCTYPE html>
<html>
<head>
    <title>主页面</title>
</head>
<body>
    <iframe src="https://example.com/cors.html" id="myIframe"></iframe>
    <script>
        var iframe = document.getElementById('myIframe');
        iframe.onload = function() {
            iframe.contentWindow.fetch('https://example.com/cors')
                .then(function(response) {
                    return response.text();
                })
                .then(function(text) {
                    console.log(text);
                });
        };
    </script>
</body>
</html>

iframe 页面 (cors.html):

<!DOCTYPE html>
<html>
<head>
    <title>Iframe 页面</title>
</head>
<body>
    <script>
        window.onload = function() {
            fetch('https://example.com/cors')
                .then(function(response) {
                    return response.text();
                })
                .then(function(text) {
                    console.log(text);
                });
        };
    </script>
</body>
</html>

总结

本文介绍了三种轻松实现跨域方法调用的方法：使用 postMessage、使用 JSONP 和使用 CORS。这些方法可以帮助开发者突破 iframe 的同源策略限制，实现跨域通信。在实际应用中，可以根据具体需求选择合适的方法。