首页 > 编程语言 >javascript postMessage给子页面发消息

javascript postMessage给子页面发消息

时间:2023-11-17 12:34:55浏览次数:40  
标签:postMessage event window childwin 给子 data 发消息 页面

发送消息页面

<!DOCTYPE html>
<html>
<head>
    <title>demo</title>
    <meta charset="utf-8" />
    <script>
        var childwin
        const childname = "popup"
        function openChild() {
            childwin = window.open("b.html", childname)
        }
        function sendMessage(){
            let msg = "hello world"
            childwin.postMessage(msg, '*')
        }
        window.addEventListener("message", (event)=>{
            console.log(event.data)
        })
    </script>
</head>
<body>
<form>
    <fieldset>
        <input type='button' id='btnopen' value='打开新页面' onclick='openChild()' />
        <input type='button' id='btnSendMsg' value='发消息' onclick='sendMessage()' />
    </fieldset>
</form>
</body>

接收并回复消息页面

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
    <title>demo</title>
</head>
<body>
<video id="video" autoplay style="width: 100%; height: 100%; object-fit: fill"></video>
</body>
</html>
<script>
    window.addEventListener("message", (event)=>{
        if (event.data != "hello world") {
            return
        }
        console.log(event.data)
        event.source.postMessage("response", event.origin)

    })
</script>

标签:postMessage,event,window,childwin,给子,data,发消息,页面
From: https://www.cnblogs.com/zhouyang209117/p/17838465.html

相关文章

  • vue3 父组件传值给子组件 子组件修改后回传给父组件
    父组件<jdy-goods-attrv-model:goods_sn="goods.goods_sn"></jdy-goods-attr>//尤总在vue3的时候给我们提供了一个新的思路:v-model来实现父传子,并且子也可以修改父组件传递过来的数据。子组件constprops=defineProps({goods_sn:{type:String,default:'......
  • js浏览器通信postMessage
    1、背景:一个应用中内嵌了iframe,外层应用需要知道iframe做了一些具体的操作来更新页面,所以需要用到postMessage2、代码模块发起方:window.parent.postMessage({type:'sign-event',//事件名,内外层统一data:{data:data//需要传递的参数},......
  • 微信使用python定时主动群发消息
    目前市面上的微信营销软件,绝大部分是模拟登录或者进程hook外挂形式,属于违规使用微信的范畴,容易被微信官方封号。经过思考后,我觉得利用python自动化UI点击,鼠标键盘操作,是符合真人使用微信的习惯的,被封的风险最低。因为必须是UI自动化,所以我们使用windows系统,并且结合微信电脑版来实......
  • 使用postMessage实现iframe和父页面通信
    语法语法otherWindow.postMessage(message,targetOrigin,[transfer]);otherWindow其他窗口的一个引用,例如向子窗口发送则otherWindow是子窗口的window对象父页面向子页面Iframe通信//父页面//获取iframe元素constiFrame:SafeAny=document.getElementById......
  • odoo 给子表设默认值
    #设置默认值函数@api.modeldef_default_ids(self):default_ids=[]forsinrange(1,6):default_ids.append((0,0,{'service':s,'all':0}))#字典里边填的是默认子表的值,前面0,0都是默认的returndefault_ids#字段ids=fiel......
  • 把数组对象最外层某个属性的值赋值给子集
    /**功能需求:把数组对象最外层某个属性的值赋值给子集*arr:要操作的数组对象*propertyName:要操作的属性名*value:用来保存最外层对象属性的值*/functionassignValueToChildren(arr,propertyName,value)......
  • 父组件传值给子组件
    app.vue<template> <divid="main">  <router-view    :test_value="this.test_value"    ></router-view> </div></template>exportdefault{name:'App',componen......
  • SpringBoot中使用Netty开发WebSocket服务-netty-websocket-spring-boot-starter开源项
    场景SpringBoot+Vue整合WebSocket实现前后端消息推送:https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/114392573SpringCloud(若依微服务版为例)集成WebSocket实现前后端的消息推送:https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/114480731若依前后......
  • SpringBoot集成kafka收发消息——传递消息为对象
    目前springboot整合后的kafka,因为序列化器是StringSerializer,这个时候如果需要传递对象可以有两种方式方式一:可以自定义序列化器,对象类型众多,这种方式通用性不强。方式二:可以把要传递的对象进行转json字符串,接收消息后再转为对象即可,本项目采用这种方式JSON.toJSONString(user)......
  • Netty-TCP 04.发消息
    本文是使用Netty开发一个简单的TCP通讯(聊天)应用程序的第【4】部分,主要测试客户端和服务端的通讯。服务端下面是服务端测试代码:/***@authormichong*/publicclassTCPServer{publicstaticvoidmain(String[]args){TCPServerBootstrapbootstrap=ne......