js控制父页面iframe

<!-- 父页面 -->
<iframe id="myIframe" src="child.html"></iframe>
<button onclick="changeIframeContent()">Change Content</button>

<script>
function changeIframeContent() {
    var iframe = document.getElementById('myIframe');
    var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
    iframeDocument.body.innerHTML = '<h1>New Content</h1>';
}
</script>

<!-- child.html -->
<h1>Original Content</h1>

<!-- 父页面 -->
<iframe id="myIframe" src="https://example.com/child.html"></iframe>
<button onclick="sendMessage()">Send Message</button>

<script>
function sendMessage() {
    var iframe = document.getElementById('myIframe');
    iframe.contentWindow.postMessage('Hello from parent!', 'https://example.com');
}

window.addEventListener('message', function(event) {
    if (event.origin !== 'https://example.com') return; // 安全检查
    console.log('Message received:', event.data);
});
</script>

<!-- child.html -->
<script>
window.addEventListener('message', function(event) {
    if (event.origin !== 'https://parentdomain.com') return; // 安全检查
    console.log('Message received:', event.data);
    event.source.postMessage('Hello from iframe!', event.origin);
});
</script>