iframe之间传递参数

http://www.bianceng.cn/a/2014/0316/40036.htm

跨域访问的解决方案（HTML 5的方法：postMessage)


关于跨域访问，使用JSONP的方法，我前面已经demo过了，具体见http://supercharles888.blog.51cto.com/609344/856886，HTML5提供了一个非常强大的API，叫postMessage，它其实就是以前iframe的进化版本，使用起来极其方便，这里举个实验例子：
我们依旧按照与上文相同的设定，假定我们有2个Domain
Domain1: http://localhost:8080  它上面有个应用叫HTMLDomain1，并且有个页面叫sender.html。
Domain2:http://localhost:8180 它上面有个应用叫HTMLDomain2,并且有个页面叫receiver.html。
我现在的需求是，假定Domain1上我们有个json数据，我们想让Domain2应用中的javascript要可以操作这个json 数据（注意，这里已经是跨域了，因为Domain2上的js操作了Domain1上的数据），应该怎么办呢？
解决方案就是用HTML5的postMessage方法
Domain2的代码:
首先，我们在Domain2上创建一个HTML页面，这个页面没什么内容，就一行文字会来标识它是Domain 2,它下方将来会被js用来填充从Domain1弄过来的数据。
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Domain2上的接收者页面receiver.html</title> 
<script type="text/javascript" src="js/receiveInfo.js"></script> 
</head> 
<body onload="receiveInfoFromAnotherDomain();"> 
     
     
<p>这个页面是HTML5跨域访问的Domain2上的页面receiver.html，它会处理来自Domain1上sender.html发送的页面</p> 
     
     
</body> 
</html>
Domain2页面加载时候，它会调用receiveInfoFromAnotherDomain()函数，这个函数首先定义了一个事件监听函数，它只接受来自Domain1(http://localhost:8080)的事件，否则就忽略掉，然后它从这个事件中分离出信息负载，也就是json 数据，然后显示在页面底部：
//这个函数用于处理从Domain1上的sender发送过来的信息，然后将他们打印出来 
function receiveInfoFromAnotherDomain(){ 
         
    console.log("entering method receiveInfoFromAnotherDomain()"); 
    //首先让window添加一个事件监听函数，表明它可以监听窗口对象的message事件 
    //它受到事件时，会先判断是否来自指定的Domain(不是所有Domain丢过来的事件它都处理的） 
    window.addEventListener("message",function(ev){ 
        console.log("the receiver callback func has been invoked"); 
             
        //如果不是来自指定Domain的，则忽略 
        if(ev.origin !="http://localhost:8080"){ 
            console.log("the event doesn't come from Domain1!"); 
            return; 
        } 
             
        //现在可以处理数据了 
        //控制台打印出接收到的json数据，因为我们把json字符串发送了过来 
        console.log(ev.data); 
     
        //将json字符串转为json对象，然后从中分离出原始信息 
        var personInfoJSON = JSON.parse(ev.data); 
        var name = personInfoJSON.name; 
        var title = personInfoJSON.title; 
        var info = personInfoJSON.info; 
             
        //构造信息文本并且显示在页面的底部 
        var personInfoString="从域为： "+ev.origin+"那里传来的数据."+"<br>"; 
        personInfoString+="姓名是: "+name+"<br>"; 
        personInfoString+="头衔为：  "+title+"<br>"; 
        personInfoString+="信息为：  "+info+"<br>"; 
        document.body.innerHTML=personInfoString; 
                     
        } 
             
    ); 
     
     
     
     
}

 

posted @ 2015-06-10 10:46  timeAnouk  阅读(702)  评论(0)  编辑  收藏  举报