js 原生跨页面通信_《DOM操作跨线程》

最新推荐文章于 2023-11-08 20:23:21 发布
最新推荐文章于 2023-11-08 20:23:21 发布
阅读量124 收藏
点赞数
文章标签： js 原生跨页面通信
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39717029/article/details/111710090
版权

f54083a73214e6d3859c0f3a7bcd0063.png

JS引擎和渲染引擎各线程各司其职，JS引擎不能操作页面，只能操作JS。渲染引擎不能操作JS，只能操作页面

但是，​document.body.appendChild(div1)​这句代码是如何把​​div1​​放到页面上改变页面的呢？

跨线程通信

当浏览器发现JS在​body​里面加了个​div1​对象

浏览器就会通知渲染引擎在页面里也新增一个​div​元素

新增的​div​元素所有属性都照抄​div1​对象

插入新标签的完整过程

  • 在插入div1放入页面之前

你对​div1​所有的操作都属于​JS​线程内的操作

  • 在插入div1放入页面之时

浏览器会发现​JS​的意图

就会通知渲染引擎在页面中渲染​div1​对应的元素

  • 在插入div1放入页面之后

你对​div1​的操作都有可能会触发重新渲染

比如你想改​div1​的​id

最低0.47元/天 解锁文章
weixin_39717029
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
原生JS实现几个常用DOM操作API实例
12-29
原生实现jQuery的sibling方法 <body> <span>我是span标签</span> <div>我是一个div</div> <h1 id=h1>我是标题</h1> <p>我是一个段落</p> [removed] //获取元素的兄弟节点 function siblings(o){//参数o就是想取谁的兄弟节点，就把那个元素传进去 var a = [];//定义一个数组，用来存储o的兄弟元素 //previousSibling返回位于相同节点树层级的前一个元素 var p = o.previousSibling; while(p){/
原生js实现跨页面通信
m0_62323931的博客
05-30 7
无
JavaScript实现跨标签页通信
TeroZhang的博客
11-02 1606
💡 在 Web 开发中，有时我们需要实现不同页面之间的数据传递和事件触发，比如一个页面打开了另一个页面，然后在新的页面中操作后需要更新原来的页面的内容。这种场景在电商、支付、社交等领域都很常见，那么如何用js来实现不同页面之间的交互呢？下面提供几种常见的方法供大家学习参考！
js 跨浏览器tab页通信
wangjun5159的专栏
02-23 2716
跨tab页通信 今天遇到一个问题，订单列表页面，新开了一个新增订单的tab页，新增完后，订单列表要即时显示，这就是跨tab（tab、window、frame、iframe）通信,注意tab页、window窗口、frame、iframe都属于跨tab范畴，同源下，可使用BroadCastChannel解决此问题。（https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API） // If it is the first to co
js中多个页面之间如何进行通信？有什么区别？
最新发布
子玉的博客
11-08 337
使用PostMessage API：如果你的页面是通过iframe嵌套在另一个页面中，或者是由同一域名下的不同页面组成，你可以使用PostMessage API来进行跨页面通信。通过服务器进行通信：如果需要在不同页面之间进行实时通信或共享数据，可以通过服务器端建立一个后端服务，并让不同页面通过WebSocket或AJAX等技术与后端进行通信，从而实现页面之间的数据交换。- 优点：可以在同一浏览器的不同页面之间共享数据，支持存储较大量的数据，并且相对安全。
js 在不同页面交互
qq_51553749的博客
04-06 1259
通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为https），端口号（443为https的默认值），以及主机（两个页面的模数Document.domain设置为相同的值）时，这两个脚本才能相互通信。message是要发送的数据，可以是任何类型的对象。- 同源或跨域iframe通信：当一个页面嵌入了另一个页面时，可以通过window.frames或document.getElementById()获取对方窗口的引用，然后通过postMessage()方法进行数据传递和事件触发。
kbone 高级 - 跨页面通信和跨页面数据共享
qianfeng_dashuju的博客
09-10 228
在 kbone 中，每个页面拥有独立的 window 对象，页面与页面间是相互隔离的，为此需要一个跨页面通信和跨页面数据共享的方式。 1、用法 1.1 在页面中订阅广播消息 // 页面1 window.$$subscribe('hello', data => { console.log('receive a msg: ', data) }) 1.2 在其他页面中发布广播消息 // 页面2 window.$$publish('hello', 'I am june') 在订阅了此消
原生JS和jQuery操作DOM对比总结
10-20
主要给大家介绍了原生JS和jQuery操作DOM的一些对比总结，文中总结了很多的对比，相信对大家的学习或者工作能带来一定的帮助，需要的朋友可以参考借鉴，下面来一起看看吧。
原生js实现针对Dom节点的CRUD操作示例
10-16
主要介绍了原生js实现针对Dom节点的CRUD操作,结合实例形式分析了javascript操作dom节点的创建、获取、增删改查等相关操作技巧,需要的朋友可以参考下
JS 跨标签页或窗口通信
qq_41742576的博客
05-25 594
5、存储数据类型只能是字符串，引用类型会转化为相应的数据类型，比如对象存储的是[object Object]；2、数据大小有限制，与localStorage有关，不同的浏览器不一样，一般5M；3、只能旧的窗口发送信息，新窗口接受信息；2、后端可以控制是否对哪一个设备发送消息；3、发送信息的窗口不会触发监听事件；1、兼容性低，与worker类似；1、需要前后端需要一直保持通讯；4、只有数据改变了才能监听到；1、对数据类型传输没有限制；2、对数据类型传输无限制；1、必须同域，不可跨域；1、发送窗口也能监听到；
concurrent-thread.js:为单线程JavaScript实现多线程并发的功能，语意上参考Java实现，提供getStatesleepjoin等API，并提供线程间通信的功能，依赖ES6语法，基于Promise和Async函数实现，而需要Babel编译才能运行
03-14
并发线程.js 为单线程JavaScript实现多线程并发的功能，语意上参考Java实现，提供getState / sleep / join等API，并提供线程间通信的功能，依赖ES6语法，基于Promise和Async函数实现，故需要Babel编译才能运行。JavaScrpt本来就是单线程的，所以这只是在API的纵向实现了模拟，在内置的介绍中，每条所谓的线程其实就是普通的异步函数，并在此基础上实现不同线程的协调配合 何时使用 当工程需要让两个函数在执行上不互相干扰时，同时也不希望它们会会成为主线程，同时，这两个函数还需要实现类似并发多线程之间的协调需求的时候，你可以使用这个并发模拟库，这种这种应用场景很少（扎心了呀） 。 原料药 Submit （function，[namespace]） ：接收一个函数，普通函数或Async函数异步，并异步执行，线程 sleep（ms） ：线程Hiber
Web Worker 使用教程
前端大全
07-12 663
（点击上方公众号，可快速关注）作者：阮一峰www.ruanyifeng.com/blog/2018/07/web-worker.html一、概述JavaScript 语言...
js如何实现多线程
wf280496的博客
03-18 2481
允许我们在后台运行一个脚本，而不影响页面的性能和用户界面。这个脚本运行在与主线程不同的线程中，可以执行一些计算密集型的操作。在主线程和工作线程之间通信可以通过消息传递来完成。此外，由于工作线程与主线程之间的通信是通过消息传递实现的，因此在传递大量数据时可能会出现性能问题。是一种单线程语言，它的执行模型决定了同一时间只能有一个任务执行。向主线程发送了一个包含结果的消息。在上面的示例中，我们创建了一个工作线程，通过。的帮助下，我们可以在浏览器中实现多线程。事件来接收从工作线程返回的消息。
js 关于iframe页面之间通信, 传递消息
godev的博客
08-26 3336
通过使用postMessage和onmessage这两个HTML5的方法, 实现iframe跨页面通信功能
原生js怎么进行跨页面操作呢
qqianzixu的博客
02-26 367
原生js跨页面操作
js页面间通信方法实现
qq_50737627的博客
12-23 945
在写页面的时候经常会碰到这样的需求：需要两个打开着的页面间传递数据或者事件。 比如：已有列表页A，通过A打开详情B进行编辑；编辑保存之后希望A能自动刷新页面。这个时候就可以用到“storage”事件。关于localStorage的用法可在其他地方找到。 可触发“storage”事件的条件如下： 同一个浏览器打开了多个同源的页面（URL由协议、域名、端口和路径组成，如果两个URL的协议、域名和端口相同，则表示他们同源）； 一个网页中修改localStorage； 另一个网页注册了storage事件。 在测试的
前端跨页面通信
大灰狼的小绵羊哥哥的博客
04-15 1659
背景 用户在实际的操作场景中会打开多个 Tab 页面A、B、C、D、E...。当用户在 E Tab 页退出登录，并且登录到新的账号，然后用户切换到非 E 的 Tab 时，发现登录信息没有刷新， 并且由于登录信息没有刷新，会出现操作异常。这个问题简单来说就是多个 Tab 信息没有同步。问题的关键在于一个 Tab 退出重新登录，需要通知到其他的 Tab 刷新到最新的信息。本质问题就是解决前端跨页面通信。 本篇文章就是对前端跨页面通信的解决方案做了一个了解。 onstorage WindowEventHa
JavaScript怎么实现两个窗口之间的通信？ https://blog.csdn.net/kaimo313/article/details/107773642
weixin_39897287的博客
02-08 1516
问题 最近在进行业务开发的时候，遇到一个问题，就是一个页面里面点击打开了一个新的窗口，然后在新的窗口里面保存成功数据之后需要更新前面一个窗口的数据？ window.postMessage的简单介绍 一段时间的挣扎，确定了用postMessage实现改功能，没办法，这个再一次涉及到了我的知识盲区。 我们先来看一看MDN上怎么说 简介 【window.postMessage】 window.postMessage() 方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协
js 原生跨页面通信_DOM操作是跨线程的你知道吗？
weixin_39551188的博客
11-27 152
在JS世界里面浏览器有两个重要的功能，分为渲染引擎和JS引擎。渲染引擎专门负责渲染Html和css的，JS引擎是专门用来执行JS的。这两个引擎是在不同的线程里面，它们都自己做着自己的事情，互不打扰。跨线程操作各线程各司其职JS引擎不能操作页面，只能操作JS，渲染引擎也是如此，不能操作JS，只能操作页面。两位元老都克克克克业业的在自己的岗位默默奋斗着，每天都是如此，一如既往。直到有一天一位黑袍少年在...
easecationnet怎么原生跨服
10-06
原生跨服是指在不同服务器之间进行交互和沟通。要实现原生跨服，需要进行以下步骤： 1. 确定服务器之间的通信协议：首先，需要确定不同服务器之间的通信协议，常见的有TCP/IP协议、HTTP协议等。选择合适的协议后，可以进行跨服通信的设置。 2. 编写跨服通信代码：根据选定的通信协议，使用相应的编程语言编写跨服通信的代码。这些代码主要包括连接服务器、发送请求、接收响应等操作。 3. 设计跨服数据传输格式：服务器之间的数据传输需要定义统一的格式，以便能够正确解析和处理数据。可以考虑使用JSON、XML等格式，并对数据进行加密和压缩，确保数据的安全和稳定传输。 4. 进行跨服功能开发：根据需求，在服务器代码中开发跨服功能。这包括调用跨服通信代码，实现不同服务器之间的数据交互和协同操作。 5. 进行测试和调试：完成跨服功能开发后，需要进行测试和调试，确保跨服功能的稳定性和正确性。可以通过模拟不同服务器环境进行测试，检查通信是否正常、数据是否准确传输等。 6. 部署和上线：当跨服功能经过充分测试，并确保稳定可靠后，可以进行部署和上线。部署时要注意服务器之间的网络连通性和配置。 综上所述，要实现原生跨服，需要经过协议确定、编写通信代码、设计数据传输格式、开发跨服功能、测试调试和部署上线等一系列步骤。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值