四种跨域方式

1、jsonp

<script>
        function getWeather(json) {
            console.log(json);
        }
 </script>
    <script src="http://e.163.com/jnewsWeather.json? callback=getWeather&cityId=101010100">
   </script>

2、postMessage

<iframe id="iframe" width="480px" height="270px" src="http://jasonkid.github.io/fezone/"></iframe>
<script>
    var iframe = document.getElementById('iframe');
    window.addEventListener('message', function(event) {
        console.log(event);
        event.source.postMessage('Message from parent page.', '*');
    });
</script>

3、iframe + document.name

<iframe id="iframe" width="480px" height="270px" src="http://jasonkid.github.io/fezone/"></iframe>
<script>
    var iframe = document.getElementById('iframe');
    iframe.onload = function(){
        iframe.onload = function(){
            console.log(iframe.contentWindow.name);
        }
        iframe.src = "about:blank";
    }
</script>

4、document.domain

index.html

<iframe id="iframe" width="480px" height="270px" src="iframe.html"></iframe>
    <script>
        /**
         * 在框架的父页面也要设置 document.domain
         */
//        document.domain = x.x; // 替换为x.x之类的一级域名，但必须是当前domain的后缀。

        var iframe = document.getElementById('iframe');
        iframe.onload = function(){
            iframe.contentDocument.getElementsByTagName('body')[0].innerText = 'Text Changed!';
            iframe.contentWindow.iframeFunc();
        }
    </script>

iframe.html

    <p>这是iFrame</p>
    <script>
        /**
         *  document.domain 默认是整个域名
         *  所以不同 N 级域名的 iframe 是无法被获取的
         *  我们将 iframe 的 document.domain 设置为域名的一级域名
         */
//        document.domain = x.x; // 替换为x.x之类的一级域名，但必须是当前domain的后缀。

        function iframeFunc() {
            console.log('Calling function successfully!');
        }
    </script>