猿创征文 | 基于H5实现跨文档通信 & websocket

已于 2022-09-01 20:53:16 修改
阅读量855 收藏 17
点赞数 19
分类专栏： HTML5 前端 文章标签： 前端 javascript html5 websocket
于 2022-09-01 19:55:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48802092/article/details/126649202
版权

 ♡ ‧₊˚ 跨文档通信 ‧₊˚ ♡

跨文档通信指的是不需要借助服务器实现两个页面之间的数据传递。

H5里面可以通过window.open()方法实现了一个页面到另一个页面的跳转以及数据的发送与接收；

还可以通过内联框架在 iframe 里面嵌套另一个页面来实现跳转。

 

☆·♪ *ﾟ･  window.open()  ･ *ﾟ ☆·♪

 

发送页面

HTML：在html中写两个按钮，一个用来发送数据，一个用来跳转页面。

<body>
    <button>打开B1页面</button>
    <button>发送数据</button>
</body>

JS：

要用到的方法：

  • window.open();用来实现页面的跳转
  • postMessage(message, targetOrigin, [transfer]); 可以实现两个页面的数据传输，不受跨域的限制。message时需要进行传输的数据内容； targetOrigin发送消息的目标窗口的域名，它可以是一个 URI 或者是通配符 '*'；transfer是一个可选参数，基本不会使用到，在此不做说明。
<script>
        window.onload=function(){
            var btn1 = document.getElementsByTagName('button')[0];
            var btn2 = document.getElementsByTagName('button')[1];
            var btn3 = document.getElementsByTagName('button')[2];
            var win;    
            btn1.onclick=function(){
                // 返回打开页面的窗口对象
                console.log("111");
                win = window.open("./10-B1页面.html");
                // window.open("./10-B1页面.html");
            }
            btn2.onclick=function(){
                // 发送数据 参数：要发送的数据，发送的域名
                win.postMessage('hello', '*')
            }
        }
    </script>

 

 接收页面  

接受页面的HTML里可以随便放些内容，也可以不加。

JS：在这里我们只需要加入一个onmessage()事件来接收，onmessage事件就是这个event，里面包含了data (传递的数据)，origin(发送消息窗口的源（协议主机端口号)。

    <script>
        window.onmessage=function(event){
            console.log(event.data);
            console.log(event.origin);
        }
    </script>

注意点：在浏览器打开第一个页面后，我们需要先点击发送打开B1按钮，将新页面打开之后再返回原来的页面点击“发送数据”，这时候在新页面的控制台里我们就能看到发送过去的 “hello”。

 

 ☆·♪ *ﾟ･  iframe  ･ *ﾟ ☆·♪

发送页面

HTML：引入一个iframe标签，在src里放新页面的路径。

    <iframe src="./10-B1页面.html" frameborder="0"></iframe>

JS：通过document.getById或者document.querySelector获取到子页面的iframe标签，然后使用contentWindow属性就可以了

            // 获取内联框架
            btn3.onclick=function(){
            // 获取内联框架的窗口
                win = document.querySelector('iframe').contentWindow;
            }
        }

 接受页面

给接收页面添加一个简单的css样式，就能看到B1页面被B页面引进了

<style>
        body{
            width: 400px;
            height: 400px;
            background-color: cornflowerblue;
        }
 </style>

如图：

79944d5aeac949c28b79940bbeeeba7c.png

 

 ♡ ‧₊˚ websocket ‧₊˚ ♡

 

 ☆·♪ *ﾟ･ 什么是websocket  ･ *ﾟ ☆·♪

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。

使用websocket可以在服务器与客户端之间建立一个非HTTP的双向连接，这个连接是实时的也是永久的，除非被手动关闭，否则服务器可以随时将消息推送到客户端。

 

 ☆·♪ *ﾟ･ 怎么用websocket  ･ *ﾟ ☆·♪

要想实现websocket连接，需要有服务器的支持。

    1.首先要创建一个新的 WebSocket对象，并建立与服务器的连接：

        var socket = new WebSocket('ws://ip:端口号/xxx/xx');

     2.使用onmessage接收服务器的消息推送       

 socket.onmessage=function(){

            console.log(event.data);

        }

    3.  使用onopen对webscoket和服务器连接成功进行监听


        socket.onopen=function(){
            console.log('webscoket与服务器连接成功');
            socket.send('发送给服务器的数据')
        }

      4.使用close对webscoket和服务器连接关闭进行监听

        socket.close=function(){
            console.log('webscoket与服务器连接关闭');
        }

    5. 设置一个定时器在五秒后关闭webscoket连接   

     setTimeout(()=>{

            socket.close();

        },5000)

如图： 

59f5938e7c884d2d88dc46a12d8e8f2f.png

 

 

 

愛 / 滥 / 時
关注
专栏目录
h5聊天室（websocket实现）
01-19
h5聊天室（websocket实现）,使用umeditor，开发环境eclipse.
H5的WebSocket
weixin_43321726的博客
12-23 193
多人聊天 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>在线聊天</title> </head> <body> &
h5--通信--跨文档消息传输、websocket
cmy741741的博客
11-10 2511
H5提供了网页文档之间互相接收与发送消息的功能。当在a页面中通过window.open方法打开b页面，或者在a页面中通过iframe嵌套b页面，我们想让a中的数据传递到b中就可以使用跨文档消息传输 A页面的核心代码 window.onmessage = function(event){ event.data // 数据 event.origin //源 } B页面的核心代码 otherWindow.postMessage(message,targetOrigin) // ot
h5之webSocket
weixin_51207199的博客
05-26 648
文章目录使用ws模块创建一个websocket客户端创建链接 什么是WebSocket？ WebSocket网络套接字，是一种全双工的通讯协议，属于TCP连接。主要用于客户端和服务器之间的通讯。通过WebSocket，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。 什么是全双工和半双工？ 全双工允许数据在两个方向上同时传输，比如：手机 半双工允许数据在两个方向上传输，但是同一时间数据只能在一个方向上传输，实际上是切换的单工。比如：对讲机 七层网络协议？
H5 WebSocket
s13166803785的博客
12-18 843
1 /** 2 H5 Websocket 3 http请求只能客户端单方便向服务器请求发送数据 短连接 轮询又太浪费资源 4 websocket 实现全双通 长连接 用于前后端频繁交互的场景 5 6 其他特点包括: 7 (1)建立在 TCP 协议之上，服务器端的实现比较容易。 8 9 (2)与 HTTP 协议有着良好的兼容性。
ios 实现websocket和h5 websocket通讯
03-05
总结，实现iOS与H5的WebSocket通信，需要对两端的WebSocket API有深入理解，确保通信协议的一致性，以及良好的错误处理和数据同步机制。在实际开发中，还需要关注性能优化、安全性和网络条件下的稳定性问题。
H5实现websocket聊天对话
09-14
WebSocket是Web应用中实现实时通信的关键技术，尤其在构建聊天应用、实时数据更新等场景下。HTML5（H5）的出现，使得WebSocket在浏览器端得以广泛应用，为开发者提供了更强大的交互能力。在这个“H5实现WebSocket...
基于springboot+h5+websocket的即时通讯客服系统和百度实时语音转译(语音在线识别)
11-29
【标题】"基于SpringBoot+h5+WebSocket的即时通讯客服系统和百度实时语音转译(语音在线识别)"涉及的关键技术主要包括SpringBoot框架、HTML5、WebSocket协议以及语音识别技术。这个系统利用现代Web技术构建了一个实时...
使用 Spring Boot 实现 WebSocket实时通信
08-28
使用 Spring Boot 实现 WebSocket 实时通信 Spring Boot 是一个基于 Java 的框架，提供了强大的工具和功能来快速构建生产级别的应用程序。 WebSocket 是一种实时通信技术，允许服务器将消息推送到客户端，而不需要...
基于Javascript的跨平台Websocket实时通讯设计源码
最新发布
09-22
本项目是基于Javascript开发的跨平台Websocket实时通讯设计，包含399个文件，其中包括108个AAR文件、40个JSON配置文件、35个JavaScript脚本文件、27个XML配置文件、15个Markdown文档文件、15个PNG图像文件、12个...
基于HTML5 WebSocket服务端的封装
09-22
基于HTML5 WebSocket服务端的封装，绝对能用，让你不用费神捣鼓websocket方面的东西了，
WebSocket服务器端+Html5客户端
10-27
WebSocket服务器端+Html5客户端,服务器端dotnet framework2.0,3.5,4.0,4.5都支持。
H5-跨文档消息通信
小菜菜的博客
11-07 400
1 同域下的窗口通讯 两个页面：a.html和b.html 打开另一个页面有两种方式：iframe和window.open (1)iframe 如果我们要操作一个iframe里面的dom元素，首先要获取到iframe引入的页面的window oMyIframe.contentWindow -> 被iframe包含的页面的window对象 alert(oMyIframe.contentWi
H5-websocket实战案例
__AIR__
12-17 594
HTML5 WebSocket WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。 WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。 在 WebSocket API 中...
H5中webSocket 的基本使用
weixin_67002441的博客
07-02 1698
监听 WebSocket 事件：通过为 WebSocket 对象绑定各种事件处理程序来监听不同的事件，以便在特定事件发生时执行相应的逻辑。常见的 WebSocket 事件包括连接建立成功、接收到消息、连接关闭等。需要注意的是，WebSocket 需要服务器端支持并实现相应的协议和逻辑。在事件处理程序中，可以访问接收到的消息内容，并根据需要进行处理和展示。这只是一个简单的示例，实际应用中可能涉及更多复杂的逻辑和处理方式。断开连接：如果希望关闭 WebSocket 连接，可以调用 WebSocket 对象的。
Websocket通信和H5地理位置API
weixin_53027472的博客
09-01 389
websocket通信协议和H5获取地理位置API
Html 5 Websocket 通信 学习的一些感悟
changruihe的专栏
05-08 2148
1，初识IM与Websocket 我的毕业设计的题目是“基于html5 websocket的IM系统设计与实现 ”，当时选题是冲着我们的一个教C语言的老师去的，对于什么html5 ？IM不甚了解。然后不断求教与度娘，对一些基本概念也有了一定的了解，然后发现html5名气虽大，但是好多东西还是新的，处于开发阶段、好多浏览器似乎也不买他的帐，就是不支持，IM原来就是QQ，而QQ是完全基于桌面，而我
HTML5-WebSocket实现多文件同时上传
dcnna0422的博客
12-17 250
在传统的HTTP应用上传文件想要同时上传多个文件并查看上传进度是一件很麻烦的事情,当然现在也有一些基于SWF的文件上传组件提供这种的便利性.到了HTML5下对文件的读取和上传的控制方面就非常灵活,HTML5提供一系列的AIP进行文件读取,包括计取文件某一块的内容也非常方便,结合Websocket进行文件的传输就变得更加方便和灵活.下面通过使用HTML5结合websocet简单地实现多文件...
WebSocket（一）：基于Spring Boot项目配合H5标准的WebSocket服务端
weixin_42717117的博客
02-25 1642
系列文章目录 WebSocket（一）：基于Spring Boot项目配合H5标准的WebSocket服务端 文章目录系列文章目录前言一、WebSocket二、使用步骤1.引入库2.编写Spring Boot启动入口2.编写WebSocket服务端3.测试结果三、总结 前言 此系列文章为记录使用WebSocket的相关过程，如有错误的地方，还请指正。 一、WebSocket WebSocket 也是一种全双工通信的协议，既允许客户端向服务器主动发送消息，也允许服务器主动向客户端发送消息。在 We
基于h5+springboot websocket实时通信实现客服功能
05-13
HTML5和WebSocket是当前最火热的前端和后端技术之一，而Spring Boot是现代Java Web开发中最流行的框架之一。结合使用这三种技术，可以实现实时通信的客服功能。 在这种方案中，WebSocket提供双向通信的能力，使得客户端和服务端可以即时地发送和接收消息。而Spring Boot框架可以快速地构建基于Java的Web应用程序，提供简单的路由、处理和存储服务。 当用户需要与客服进行通信时，客户端通过WebSocket与服务端建立连接，服务端将其路由到相应的处理程序，该程序将消息存储到数据库中，并向客服发送通知。当客服收到通知时，可以立即回复用户的消息。 使用HTML5和CSS3可以轻松地创建漂亮的、非常用户友好的聊天界面，从而提高用户的体验度。此外，还可以使用第三方JavaScript库来扩展功能，例如通知、文件传输等。 总之，基于H5、Spring Boot和WebSocket的实时通信客服方案，可以为用户提供立即响应、高品质的服务体验。
评论 14
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值