js iframe页面js

<!-- 父页面 -->
<iframe id="myIframe" src="iframeContent.html"></iframe>
<script>
  // 等待iframe加载完成
  window.onload = function() {
    var iframe = document.getElementById('myIframe');
    
    // 同源情况下直接访问iframe内容
    if (iframe.contentWindow) {
      iframe.contentWindow.document.body.style.backgroundColor = 'lightblue';
    }
    
    // 跨域情况下使用postMessage
    iframe.onload = function() {
      iframe.contentWindow.postMessage('Hello from parent', 'http://example.com');
    };
  };

  // 监听来自iframe的消息
  window.addEventListener('message', function(event) {
    if (event.origin !== 'http://example.com') return; // 安全检查
    console.log('Message from iframe:', event.data);
  }, false);
</script>

<!-- iframeContent.html -->
<script>
  // 监听来自父页面的消息
  window.addEventListener('message', function(event) {
    if (event.origin !== 'http://parent.example.com') return; // 安全检查
    console.log('Message from parent:', event.data);
    
    // 发送消息回父页面
    event.source.postMessage('Hello from iframe', event.origin);
  }, false);
</script>