通信API

最新推荐文章于 2024-04-24 15:33:13 发布

lulu_jiang

最新推荐文章于 2024-04-24 15:33:13 发布

阅读量1.4k

点赞数

分类专栏： HTML5 文章标签： api websocket function sockets exception button

本文链接：https://blog.csdn.net/lulu_jiang/article/details/7781179

版权

HTML5 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Demo.html(主窗體)

<!DOCTYPE html />
<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        <!--
        跨文檔消息傳輸：
        HTML5提供了在網頁文檔間互相接收與發送信息的功能，只要獲取網頁所在窗口對象實例，不同源的Web頁面可互相通信
        //監聽來至其他窗體的消息
        window.addEventListenter("message", function(ev){...}, false);
        //發送消息到其他窗體
        window.postMessage(message, targetOrigin);
        message：為所發送的消息文本，也可為任意js對象(需通過JSON轉換對象為文本)
        targetOrigin：為接收消息對象窗口的URL地址(如：http://localhost:8080/)
        ev參數：origin屬性，獲取消息發送源URL地址
               data屬性，可取的消息內容
               source屬性，可獲取消息發生源的窗口代理對象

        Web Sockets通信：
        HTML5提供的在Web應用程序中客戶端與服務器端之間進行的非HTTP通信機制
        使用Web Sockets API可以在服務器與客戶間建立一個非HTTP雙向連接，該連接是實時的，永久的(除非顯示關閉)
        只要客戶端有一個打開的socket且與服務器連接，服務器就可與之通信，不需再輪詢客戶端請求，轉被動為主動
        var webSocket = new WebSocket("ws://localhost:8005/socket");
        -->
        <div id="msg"></div>
        <iframe width="400" src ="Other.html"></iframe>
        <script type="text/javascript">
            //監聽message事件，接收消息
            window.addEventListener("message", function (ev) {
                document.getElementById("msg").innerHTML = "從：" + ev.origin + "，那裡傳來消息：" + ev.data;
            }, false);

            function hello() {
                var iframe = window.frames[0];
                //發送消息
                iframe.postMessage("你好", "*");
            };
            hello();
        </script>

        <div id="msg2">
        </div>
        <input id="text" type="text" />
        <button id="connect" οnclick="connect();">建立連接</button>
        <button id="send" οnclick="send();">發送數據</button>
        <button id="disconnect" οnclick="disconnect();">斷開連接</button>
        <script type="text/javascript">
            var webSocket;
            //創建socket連接
            function connect() {
                var msg = document.getElementById("msg2");
                try{
                    var readyState = new Array("正在連接","已經連接","正在關閉連接","已關閉連接");
                    var host = "ws://localhost:8005/socket";
                    webSocket = new WebSocket(host);
                    webSocket.onopen = function(){
                        msg.innerHTML += "<p>Socket狀態：" + readyState[webSocket.readyState] + "</p>";
                    };
                    webSocket.onmessage = function(msg){
                        msg.innerHTML += "<p>接收信息：" + msg.data + "</p>";
                    };
                    webSocket.onclose = function(){
                        msg.innerHTML += "<p>Socket狀態：" + readyState[webSocket.readyState] + "</p>";
                    };
                }
                catch (exception) {
                    msg.innerHTML += "<p>有錯誤發生</p>";
                }
            };

            //發送數據到後臺
            function send() {
                var text = document.getElementById("text").value;
                var msg = document.getElementById("msg2");

                if (text == "") {
                    msg.innerHTML += "<p>請輸入</p>";
                    return;
                }

                try {
                    webSocket.send(text);
                    msg.innerHTML += "<p>發送數據：" + text + "</p>";
                }
                catch (exception) {
                    msg.innerHTML += "<p>數據發送失敗</p>";
                }

                document.getElementById("text").value = "";
            };

            //關閉數據庫
            function disconnect() {
                webSocket.close();
            };
        </script>
    </body>
</html>

Other.html(內嵌套子窗體)

<!DOCTYPE html />
<html>
    <head>
        <meta charset="utf-8" />
        <script type="text/javascript">
            //監聽message事件，接收消息
            window.addEventListener("message", function (ev) {
                document.body.innerHTML = "從：" + ev.origin + "，那裡傳來消息：" + ev.data;
                //發送消息
                ev.source.postMessage("這裡是" + this.location, "*");
            }, false);
        </script>
    </head>
    <body>
    子頁面
    </body>
</html>

lulu_jiang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
通信API

Demo.html(主窗體) <!-- 跨文檔消息傳輸： HTML5提供了在網頁文檔間互相接收與發送信息的功能，只要獲取網頁所在窗口對象實例，不同源的Web頁面可互相通信 //監聽來至其他窗體的消息 window.addEventListente
复制链接

扫一扫

专栏目录