通过iframe中间页实现js跨域调用

什么是跨域调用？

当两个页面端口不同或者协议不同，或者ip地址不同的时候，如果想在这个页面调用另外一个页面中的方法，就叫做跨域调用

父页面调用子页面

通过iframe实现跨域请求
www.a.com
       www.b.com

想在a中调用b中的方法，因为a和b是不同域的，不能直接调用，但是如果有一个中间页，这个页面和b是同源的，在页面初始化的时候就帮忙调用b中的方法
然后我们再在a中初始化这个页面，这不就实现了跨域请求吗

那么结构将变成

www.a.html
       www.b.com
              www.b.com/f.html

f页面中直接在页面加载完成就调用b中的方法

然后我们只需要在a中想要调用b中方法的时候，动态生成一个iframe，嵌入ww.b.com/f.html，当生成完成的时候，它就能自动调用b中的方法

子页面调用父页面

同样的，如果是子请求父页面

那么只需要将结构变成

www.a.html
       www.b.html
              www.a.html/f.html

f初始化的时候，自动调用a中的方法
我们在b中想要调用a中方法时候，只需要动态生成一个iframe，www.a.html/f.html，这不就实现了在b中调用a中的方法吗？

当需要调用的方法不止一个的时候应该如何处理？

在a中调用b中的方法，如果方法不止一个，那可能给他加很多个页面来处理吧？这时候，可以通过传递参数的形式，然后让js解析传递过来的参数，是什么参数，就在初始化的时候调用什么方法，你可以通过window.location.href获取到当前的url地址，然后再用解析字符串的方式来解析这个地址，例如你完全可以截取到?后端的部分，判断当前传递过来的是什么参数

//父调用子方法实例
<iframe id="frame" width="0px" height="0px"></iframe>
<script>
    //需要传递两个参数一个method=这里写方法名&url=这里写具体调用哪个页面的方法
    var url = window.location.href;
    var firstIndex = url.indexOf("?");
    var frame = document.getElementById("frame");   
    if(firstIndex != -1){
        var paramArray = url.substring(firstIndex+1,url.length).split("&");
        var _src = paramArray[1].split("=")[1];
        frame.src = _src;           
        var method = paramArray[0].split("=")[1];
        if(method){
            frame.contentWindow[method]();  //传什么方法就直接调用什么方法
        }
    }   
</script>
//在a中iframe这个页面，然后写上http:www.b.html/f.html?method=test&url=http://www.b.html