js子页面获取父页面js中的值

<!-- 父页面 -->
<script>
  var parentVar = "Hello from parent!";
  function parentFunction() {
    alert("This is a function from parent page.");
  }
</script>
<iframe src="child.html"></iframe>

<!-- 子页面 -->
<script>
  // 获取父页面的变量
  var valueFromParent = window.parent.parentVar;
  console.log(valueFromParent); // 输出: Hello from parent!

  // 调用父页面的函数
  window.parent.parentFunction(); // 弹出: This is a function from parent page.
</script>

<!-- 父页面 -->
<script>
  window.addEventListener('message', function(event) {
    if (event.origin !== 'http://example.com') return; // 安全检查
    console.log('Received message:', event.data);
  }, false);

  function sendMessageToChild() {
    document.getElementById('childFrame').contentWindow.postMessage('Hello from parent!', 'http://example.com');
  }
</script>
<iframe id="childFrame" src="http://example.com/child.html"></iframe>
<button onclick="sendMessageToChild()">Send Message to Child</button>

<!-- 子页面 -->
<script>
  window.addEventListener('message', function(event) {
    if (event.origin !== 'http://parentdomain.com') return; // 安全检查
    console.log('Received message:', event.data);
  }, false);
</script>