js获取iframe中的变量

在JavaScript中，如果你想获取<iframe>中的变量，你需要确保<iframe>加载的内容与父页面在同一个域下，否则会受到同源策略的限制，无法直接访问。

基础概念

同源策略：浏览器的一种安全功能，限制了一个源的文档或脚本如何与另一个源的资源进行交互。
跨文档消息传递：一种允许不同源的窗口之间进行通信的机制。

获取iframe中变量的方法

方法一：直接访问（同源情况下）

如果<iframe>中的页面与父页面同源，可以直接通过contentWindow属性访问<iframe>的window对象，进而获取变量。

// 假设iframe的id为'myIframe'
var iframe = document.getElementById('myIframe');
// 确保iframe加载完成
iframe.onload = function() {
    // 访问iframe中的变量
    var iframeVariable = iframe.contentWindow.someVariable;
    console.log(iframeVariable);
};

方法二：使用postMessage（跨域情况下）

如果<iframe>中的页面与父页面不同源，可以使用postMessage方法进行跨域通信。

父页面代码：

// 监听来自iframe的消息
window.addEventListener('message', function(event) {
    // 验证消息来源的安全性
    if (event.origin !== 'http://example.com') return;
    // 获取iframe中的变量
    var iframeVariable = event.data;
    console.log(iframeVariable);
});

// 向iframe发送请求消息
document.getElementById('myIframe').contentWindow.postMessage('getVariable', 'http://example.com');

iframe页面代码：

// 监听来自父页面的消息
window.addEventListener('message', function(event) {
    // 验证消息来源的安全性
    if (event.origin !== 'http://parent.example.com') return;
    // 如果是请求变量的消息，则发送变量回去
    if (event.data === 'getVariable') {
        event.source.postMessage(someVariable, event.origin);
    }
});