child.html 858 B

1234567891011121314151617181920212223242526272829303132
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>子页面(iframe)</title>
  6. </head>
  7. <body>
  8. <h2>子页面(iframe)</h2>
  9. <div id="output">等待接收消息...</div>
  10. <script>
  11. // 监听来自父页面的消息
  12. window.addEventListener('message', (event) => {
  13. // 安全检查:验证来源是否可信
  14. if (event.origin !== window.parent.location.origin) {
  15. console.warn('收到未知来源的消息,已忽略:', event.origin);
  16. return;
  17. }
  18. const data = event.data;
  19. console.log('收到来自父页面的消息:', data);
  20. // 显示消息内容
  21. document.getElementById('output').innerHTML = `
  22. <p>消息: ${data.message}</p>
  23. <p>用户ID: ${data.userId}</p>
  24. <p>时间: ${data.timestamp}</p>
  25. `;
  26. });
  27. </script>
  28. </body>
  29. </html>