html5跨域数据传递(postMessage)

在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>

当在发送页面改变颜色值的时候,嵌入的iframe的页面背景色直接就被修改了,效果很好!

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。