001 - <iframe></iframe>

一、同域 下的

父窗口

<iframe id="myFrame" src="子.html"></iframe>

<script>
    /*在 父页面 下我们可以通过JS去访问'被包含页面'的DOM元素*/
    var myIframe = document.getElementById('myFrame');
    Btn.onclick = function () {
        //如果我们要操作一个iframe里面的dom元素，首先要获取到iframe引入的页面的window
        //myIframe .contentWindow  - >被iframe包含的页面的window对象
        console.log(myIframe.contentWindow) ;
        myIframe.contentWindow.document.body.style.XXXXXXX-- > ( 这里操作的就已经是子.html窗口了) ;
    }
</script>

子窗口
<script>
        /*在 子页面 下我们可以通过JS去访问'父页面'的DOM元素*/
 /** * --- window : 当前窗口 --- parent : 父级窗口 --- top : 顶级窗口 * Btn.onclick = function () { parent.document.body.style.XXXXXXX-- > ( 这里操作的就已经是 父.html窗口了) ; } </script>







二、跨域 下的

<iframe id="myFrame" src="子.html"></iframe>


<script>
        <!--父页面-->

        /*在父页面下我们可以通过JS去访问被包含页面的DOM元素*/
        var myIframe = document.getElementById('myFrame');
        Btn.onclick = function () {
            /**
             * post Message 对象
             * 接收消息的窗口的window对象.postMessage();
             * 参数1:---->发送的数据       参数2:---->接收数据的域名{带上协议}
             * 交互方式   **********************************************************
             *      -- iframe : 父页面 ： contentWindow              子页面 ： window.top
             *          --- window : 当前窗口                               --- window : 当前窗口
             *          --- parent : 父级窗口                               --- parent : 父级窗口
             *          --- top    : 顶级窗口                               --- top    : 顶级窗口
             *
             *      -- 窗口页  : 父页面 : window.open                 子页面 : window.opener
             * 接收事件
             *      -- message
             *      -- ev.origin : 发送数据来源的域
             *      -- ev.data   : 发送的数据
             */

            /**
             * postMessage : 可以通过这个方法给另外一个（子）窗口发送信息
             * 接收消息的(子)窗口的 window对象.postMessage();
             */

            // 参数1:---->发送的数据       参数2:---->接收数据的域名{带上协议}
            myIframe.contentWindow.postMessage("123","http://www.b.com");
        }
    </script>

<script>
        <!--子页面-->
        window.addEventListener("message",function (ev) {
            //console.log("b.com 下的页面接收到内容了")；

            /**
             * message 事件的事件对象下保存了发送过来的内容 ev.data
             * ev.origin : 发送数据来源的域               ev.origin
             */
            console.log(ev.data);   //父 页面发送过来的内容
            console.log(ev.origin); //发送数据来源的域     http:// ------
            if(ev.data == "123"){
                document.getElementById("id").style.color = "red";
            }
        },false)
    </script>