iframe跨域访问问题

1、“代理页面”法

参考网址:http://www.jianshu.com/p/9d90d3333215

描述:传递方法
案例:子页面调用父页面的方法,父页面方新建中间页面bridge.html文件,pay()方法为父页面供子页面调用的方法,但是由于跨域,子页面调取不到,需要通过父页面同域下的中间页面bridge来调取方法。
  中间页面bridge.html:window.onload = function(){
                       top.pay()
                   }
  子页面:function sendMessage(){//子页面在调用sendMessage()方法的时候执行pay()方法
             if(!document.getElementById("crossFrame")){
                     var iframe = document.createElement("iframe");
                     iframe.setAttribute("style","position:absolute;left:-9999px;top:-9999px")
                     iframe.setAttribute("src", "中间页面的路径bridge.html")
                     document.body.appendChild(iframe)
                 }else{
                     document.getElementById("crossFrame").src ='中间页面的路径bridge.html'
                 }
             }

2、“postMessage”法

参考网址:https://segmentfault.com/a/1190000004512967

描述:传递信息
案例:子页面传递信息给父页面
实现:
    父页面:window.addEventListener("message", function(event) {
                var str = event.data;
                //str为传递过来的信息
            }, false);
    子页面:parent.postMessage(
                    {"a",1},"父页面地址"
            );
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,552评论 25 708
  • 大部分的后端会很很鄙视前端。我也不知道为什么,可能大部分人都会觉得脚本语言根本不算语言。 大多人 会叫我们切图仔,...
    小黑的眼阅读 3,443评论 0 15
  • 前些日子从@张鑫旭微博处得一份推荐(Front-end-tutorial),号称最全的资源教程-前端涉及的所有知识...
    谷子多阅读 4,286评论 0 44
  • 用过Ubuntu的都知道Ubuntu会定期更新系统,升级系统内核,导致开机启动菜单出现多个内核版本,这样不但看起来...
    xhhjin阅读 885评论 0 4
  • 本是一只纯正的豫北汉子,小时跟爸妈吃饭,总觉味道过淡,不知为何这样清淡的味道能够让大人们如此喜欢,后来大了一些,过...
    万能的造梦者阅读 233评论 0 0