您的位置：首页 > Web前端 > JavaScript

js 页面跨域

2015-09-05 19:28 751 查看
前言HTML5新增通信相关两个API，跨文档消息传输与WEB Sockets API，跨文档消息传输功能，可以在不同网页文档，不同端口（跨域情况下）进行消息传递。使用web sockets api 可以让客户端与服务器端通过socket端口传递数据，这样便可以使用数据推送技术。跨文档消息传输在之前我们若想跨域获取信息会花很多功夫，现在只要获取网页所在窗口对象实例变可以实现互相通信。首先要想从其他窗口接受发过来的消息需要对其窗口对象进行监听：
window.addevntListener('message', function () {}, false)
使用windows对象的postMessage方法向其他窗口发生信息：
otherWindow.postMessage(message, targetOrigin)第一个参数为发送文本，也可以是js对象（json）第二个参数为接收消息对象窗口的URL，可以使用通配符
主页面代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-2.1.1.js" type="text/javascript"></script>
<script type="text/javascript">

function AddListener() {
window.addEventListener('message', DealEvent);
}
function DealEvent(ev) {
alert(ev.data);
}

function SendClick() {
var test = { "FunName": "Back", "Parm": 1230 };
var frame = window.frames[0];
frame.postMessage(test, 'http://192.168.1.101:12345/02.htm');
}
</script>
</head>
<body>
<input type="text" id="msg" />
<button id="send" onclick="SendClick()">
发送信息</button>
<button id="Button1" onclick="AddListener();">
添加监听</button>
<iframe src="http://192.168.1.101:12345/02.htm" width="400" id="f"></iframe>
<div id="msg_box">
</div>
</body>
</html>
[/code]
Ifram页面中的代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-2.1.1.js" type="text/javascript"></script>
<script type="text/javascript">

var url = '';
var source = '';
var testValue = 100;
function AddListener() {
window.addEventListener('message', DealEvent);
}
function DealEvent(ev) {
if (ev.origin) { }
//            ev.data 表示发送过来是数据json格式
//            ev.origin 表示发送参数的url
//            ev.source 表示发送页面的源
url = ev.origin;
source = ev.source;
var funName = ev.data.FunName;
var Parm = ev.data.Parm;
var res = '';
switch (funName) {
case "AddBack":
res = AddBack(Parm);
break;
case "Back":
res = Back(Parm);
break;
}
source.postMessage(res, url);
}

function SendClick() {
source.postMessage($('#w_h').val(), url);
}
function AddBack(par) {
return testValue + par;
}
function Back(par) {
return par;
}
</script>
</head>
<body>
<div id='msg'>
</div>
<input type="text" id="w_h" />
<button id="send" onclick="SendClick();">
改变外层高度</button>
<button id="Button1" onclick="AddListener();">
添加监听</button>
</body>
</html>
更加灵活的运用，该api还可以更厉害的运用，我们可以传递函数名什么的，反正可做很多事情了。web sockets 通信web sockets 是HTML5提供的在web应用程序中客户端与服务器端之间进行非HTTP的通信机制他实现了http不容易实现的服务器的数据推送等智能通信技术，因此受到了很高的关注。使用web sockes api 可以在服务器端与客户端建立非HTTP的双向连接，这个连接是实时的也是永久的，除非显式关闭这意味着当服务器想向客户端发送数据时，可以立即将数据推送到客户浏览器中，无需重新建立连接。只要客户端有一个被打开的socket并且与服务器建立了连接，服务器就可以将数据推送到这个socket上，服务器不再需要轮询客户端请求，化被动为主动。
本文转自：
http://www.jb51.net/html5/79830.html

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航