html5跨域数据传递（postMessage）

浏览数：26 / 时间：2015年06月09日

在html5中有个支持跨域传递的方法postMessage，可是实现iframe之间的数据传递！

代码如下：数据发送页面

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta name="copyright" content=""/>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <title></title>
</head>
<body>
    <div class="color">
        <input type="text" value="" class="getColor"/>
        <input type="button" id="button" value="发送颜色" />
    </div>
     <iframe id="child" src="http://localhost/send/index.html" width="400" height="300"></iframe>
</body>
</html>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
    $(function(){
        $("#button").click(function(){
            var color = $(".getColor").val().toString();
            window.frames[0].postMessage(color,‘http://localhost/send/index.html‘);
        });
    });
</script>

数据接收页面

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta name="copyright" content=""/>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <title></title>
</head>
<body>
    <div id="color" style="width:400px;height:200px;">    
    </div>
</body>
</html>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
    $(function(){
        var color = $("#color");
            window.addEventListener(‘message‘,function(e){
                var s_color=e.data;
                color.css(‘background-color‘,‘#‘+s_color);
            },false);
    });
</script>