js 取iframe中的变量

<!-- 父页面 -->
<iframe id="myIframe" src="child.html"></iframe>
<script>
  function getIframeVariable() {
    var iframe = document.getElementById('myIframe');
    // 确保iframe加载完成
    iframe.onload = function() {
      try {
        // 访问iframe内部的window对象
        var iframeWindow = iframe.contentWindow;
        // 获取变量
        var myVar = iframeWindow.myVar;
        console.log(myVar);
      } catch (e) {
        console.error('无法访问iframe内容:', e);
      }
    };
  }
  // 在适当的时候调用函数，例如页面加载完成后
  window.onload = getIframeVariable;
</script>

<!-- child.html -->
<script>
  // 定义变量
  var myVar = "Hello from iframe!";
</script>

// 父页面发送消息
var iframe = document.getElementById('myIframe');
iframe.onload = function() {
  iframe.contentWindow.postMessage('getMyVar', 'http://example.com');
};

window.addEventListener('message', function(event) {
  if (event.origin !== 'http://example.com') return; // 安全检查
  console.log('Received variable:', event.data);
});

// child.html接收消息并发送变量
window.addEventListener('message', function(event) {
  if (event.origin !== 'http://parent.com') return; // 安全检查
  if (event.data === 'getMyVar') {
    event.source.postMessage(myVar, event.origin);
  }
});