js调用iframe中的方法

<!-- 父页面 -->
<iframe id="myIframe" src="child.html"></iframe>
<button onclick="callIframeMethod()">Call Iframe Method</button>

<script>
function callIframeMethod() {
    var iframe = document.getElementById('myIframe');
    var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
    var iframeWindow = iframe.contentWindow;
    
    // 假设iframe中的页面有一个名为myFunction的方法
    iframeWindow.myFunction();
}
</script>

<!-- iframe中的页面 (child.html) -->
<script>
function myFunction() {
    alert('Method called from parent page!');
}
</script>

<!-- 父页面 -->
<iframe id="myIframe" src="https://anotherdomain.com/child.html"></iframe>
<button onclick="callIframeMethod()">Call Iframe Method</button>

<script>
function callIframeMethod() {
    var iframe = document.getElementById('myIframe');
    iframe.contentWindow.postMessage('callMyFunction', 'https://anotherdomain.com');
}

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

<!-- iframe中的页面 (child.html) -->
<script>
window.addEventListener('message', function(event) {
    if (event.origin !== 'https://yourdomain.com') return; // 安全检查
    if (event.data === 'callMyFunction') {
        myFunction();
    }
});

function myFunction() {
    alert('Method called from parent page!');
    event.source.postMessage('Function executed!', event.origin);
}
</script>

document.getElementById('myIframe').onload = function() {
    // iframe加载完成后执行的代码
};