window.frames && iframe 跨页面通信

1.定义

frames[]是窗口中所有命名的框架组成的数组。这个数组的每个元素都是一个Window对象，对应于窗口中的一个框架。

2.用法

假设iframe 是一个以存在的 iframe 的 ID 和 NAME 值，获取iframe的方法有：

document.getElementById(“iframe”); (获取的是 iframe 元素，可改变iframe的 src 或者 border , scrolling 等 attributes)

window.frames[“iframe”]; // window.frames[window.frames.length - 1] (获取的是window窗体，可通过其 document 属性操作dom，可使用iframe内的函数、变量)

例子：

$(window.frames["iframe"].document).find("#name").val("");

3. 扩展 iframe 跨页面通信

parent.html

<html>

<head>
    <style>
        h1{
            color: #5dd;
        }
    </style>

</head>

<body>
    <h1>parent</h1>
    <input id="button" type="button" value="调用child.html中的函数say()" onclick="callChild()" />
    <iframe name="myFrame" id="iframea" src="child.html" onload="load()"></iframe>
    <script type="text/javascript">
        function say() {
            alert("parent.say");
        }

        function callChild() {
            myFrame.window.say();
            myFrame.window.document.getElementById("button").value = "parent调用结束";
        }
        function load(){
            // console.log(document.getElementById('iframea').contentDocument.getElementById('button'));
            console.log(document.getElementById('iframea').contentWindow.document.getElementById('button'));

        }
        

    </script>
</body>

</html>

View Code