js 的 iframe 父子頁面通訊的簡單方法

時間 2019-11-11

原文原文鏈接

一、獲取子頁面的 window 對象 javascript

在父頁面中，存在以下兩個對象html

window.framesjava

document.iframeElement.contentWindow函數

能夠獲取到子頁面 window 對象this

// iframe id
document.getElementById('menuIframe').contentWindow

// iframe name
window.frames['menuIframe'].window

// iframe index 當前窗體的第幾個 iframe
window.frames[1].window

既然拿到了 window 對象，那函數和DOM就到手了。code

二、子 iframe 獲取父頁面htm

window.parent 對象對象

window.top對象ip

// 判斷當前頁面是不是 iframe 或 頂級頁面
window.parent == window
window.top == window

window.parent 即爲當前頁面的上一級頁面的 window 對象，若是當前頁面已經是頂層頁面，則 window.parent 就是本身。get

三、小實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <iframe src="/sub.html" name="iframeContainer" id="iframeContainer"></iframe>
    <script type="text/javascript">
        function parentHello() {
            alert("this is parent hello function!");
        }
        window.frames['iframeContainer'].subHello();
    </script>
</body>
</html>

<!-- sub.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        function subHello() {
            alert("this is sub hello function!");
        }

        window.parent.parentHello();
    </script>
</body>
</html>