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

 

 

child.html

<html>

<head>
    <style>
        body{
            background-color: #666;
        }
        h1{
            color:red;
        }
    </style>
</head>

<body>
    <h1>chlid</h1>
    <input id="button" type="button" value="调用parent.html中的say()函数" onclick="callParent()" />
    <script type="text/javascript">
        function say() {
            alert("child.say");
        }

        function callParent() {
            parent.say();
            parent.window.document.getElementById("button").value = "child调用结束";
        }
    </script>
</body>

</html>
View Code

 知识点：

window.parent 获取上一级的window对象

window.top 获取最顶级容器的window对象
window.self 返回自身window的引用

 

iframe.contentWindow, 获取iframe的window对象 

iframe.contentDocument, 获取iframe的document对象 

 

判断iframe是否加载完成有两种方法：

1. iframe上用onload事件
2. 用document.readyState=="complete"来判断

 

js在iframe子页面操作父页面元素代码：  window.parent.document.getElementByIdx_x("父页面元素id");

在iframe中调用父页面中定义的方法和变量：   window.parent.window.parentMethod();      window.parent.window.parentValue;

jquery在iframe子页面获取父页面元素代码如下:    $("#objid",parent.document)

 

js在父页面获取iframe子页面元素代码如下:     window.frames["iframe_ID"].document.getElementByIdx_x("子页面元素id");

父页面操作iframe子页面的方法和变量      window.frames["iframe_ID"].window.childMethod();      window.frames["iframe_ID"].window.childValue;

jquery在父页面获取iframe子页面的元素       $("#objid",document.frames('iframename').document)

 

posted @ 2018-10-22 18:21  justSmile2  阅读(2459)  评论(3)  编辑  收藏  举报
喵