postmessage()在同一域名下,傳遞消息給另一個頁面

這里是同域名下,getmessage.html(發送信息)傳遞消息給index.html(收到信息,并回傳收到信息)
index.html頁面

<!DOCTYPE html>
<html><head><meta http-equiv="content-type" content="text/html charset=utf-8"/><title>javascript變量聲明的一些測試</title><link rel="stylesheet" href="styles.css"/></head><body><div id="firstdiv" style="width:900px;text-align: center;border:10px solid blue"><form id="form1" action="" method="post">  <input type="button" name="submit1" value="提交"/></form> <p id="msg"></p></div>    </body><script type="text/javascript" src="test.js"></script></html>

這里 是index.html頁面中的test.js代碼

const btn=document.getElementsByName('submit1');btn[0].addEventListener('click',()=>{let popup=window.open('getmessage.html');window.addEventListener('message',function(e){console.log(e);if(e.origin!='http://xuejs.xyz')return;//這里收到發來的信息,并顯示document.getElementById('msg').innerHTML=e.data;e.source.postMessage('收到信息',e.origin);})
});

//這里是getmessage.html頁面

<!DOCTYPE html>
<html><head><meta http-equiv="content-type" content="text/html charset=utf-8"/><title>接收postmessage傳來的信息</title><script type="text/javascript" src="eventutil.js"></script></style></head><body><p id="getmsg">waiting for message...</p></body><script type="text/javascript">//window.opener表示打開getmessage.html頁面的父頁面
//這里用postMessage()傳遞了一條消息給index.htmlwindow.opener.postMessage('super window 接收到一條消息','/');//下面是接收index.html收到頁面后的回傳信息window.addEventListener('message',(e)=>{console.log(e);if(e.origin!='http://xuejs.xyz')return;console.log(e.data);});</script></html>

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/web/42127.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/42127.shtml
英文地址,請注明出處:http://en.pswp.cn/web/42127.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

機器學習統計學基礎 - 最大似然估計

最大似然估計&#xff08;Maximum Likelihood Estimation, MLE&#xff09;是一種常用的參數估計方法&#xff0c;其基本原理是通過最大化觀測數據出現的概率來尋找最優的參數估計值。具體來說&#xff0c;最大似然估計的核心思想是利用已知的樣本結果&#xff0c;反推最有可能…

Java并發編程工具包(JUC)詳解

在現代軟件開發中&#xff0c;多線程編程是一個不可避免的話題。為了更好地管理和利用多線程&#xff0c;Java提供了一個強大的工具包——java.util.concurrent&#xff08;簡稱JUC&#xff09;。JUC包含了許多用于并發編程的類和接口&#xff0c;幫助開發者高效、安全地處理線…

binutils ifunc 流程圖

上圖是x86 binutils 的流程圖。 函數說明_bfd_x86_elf_link_hash_table_createInit local STT_GNU_IFUNC symbol hash.elf_x86_64_check_relocsAdd support for handling STT_GNU_IFUNC symbols_bfd_elf_x86_get_local_sym_hashFind and/or create a hash entry for local sym…

[Go] 字符串遍歷數據類型問題

字符串遍歷問題 在使用for i,v:range str遍歷字符串時 str[i]是unit8&#xff08;byte&#xff09;類型&#xff0c;返回的是單個字節 字符串在Go中是以字節序列的形式存儲的&#xff0c;而 str[i] 直接訪問了這個字節序列中的第 i 個字節。如果字符串中的字符是單字節的ASCII…

Leetcode—97. 交錯字符串【中等】

2024每日刷題&#xff08;140&#xff09; Leetcode—97. 交錯字符串 2d動規實現代碼 class Solution { public:bool isInterleave(string s1, string s2, string s3) {int m s1.length();int n s2.length();int len s3.length();if(m n ! len) {return false;}vector<…

SpringBoot日常:封裝rabbitmq starter組件

文章目錄 邏輯實現RabbitExchangeEnumRabbitConfigRabbitModuleInfoRabbitModuleInitializerRabbitPropertiesRabbitProducerManagerPOM.xmlspring.factories 功能測試application.yml配置生產者&#xff1a;消費者&#xff1a;測試結果&#xff1a;總結 本章內容主要介紹編寫一…

stm32 USB CDC類虛擬串口初體驗

1. 目標 本文介紹CubeMX生成 USB CDC類虛擬串口工程的操作步驟。 2. 配置流程 時鐘配置 usb外設需要48M時鐘輸入 stm32405使用外部時鐘源HSE,否則配不出來48M時鐘stm32h750內部有一個48M時鐘 stm32f405時鐘配置 stm32h750時鐘配置 Connectivity ->USB_OTG_FS 和 Connect…

GEE代碼實例教程詳解:植被狀況指數(VCI)與干旱監測

簡介 在本篇博客中&#xff0c;我們將使用Google Earth Engine (GEE) 進行植被狀況指數&#xff08;Vegetation Condition Index, VCI&#xff09;的計算和干旱監測。通過MODIS NDVI數據&#xff0c;我們可以評估2001年至2024年間的植被狀況和干旱等級。 背景知識 MODIS NDV…

C++初階:從C過渡到C++的入門基礎

??所屬專欄&#xff1a;C?? ??作者主頁&#xff1a;嶔某?? C發展歷史 C的起源可以追溯到1979年&#xff0c;當時BjarneStroustrup(本賈尼斯特勞斯特盧普&#xff0c;這個翻譯的名字不同的地?可能有差異)在?爾實驗室從事計算機科學和軟件?程的研究?作。?對項?中復…

第4章 Vite模塊化與插件系統(二)

4.3 常用插件介紹 4.3.1 官方插件 vitejs/plugin-vue 用于支持 Vue.js 開發&#xff1a; npm install vitejs/plugin-vue --save-devimport vue from vitejs/plugin-vueexport default defineConfig({plugins: [vue()] })vitejs/plugin-react 用于支持 React 開發&#xf…

JavaDS —— 順序表ArrayList

順序表 順序表是用一段物理地址連續的存儲單元依次存儲數據元素的線性結構&#xff0c;一般情況下采用數組存儲。在數組上完成數據的增刪查改。在物理和邏輯上都是連續的。 模擬實現 下面是我們要自己模擬實現的方法&#xff1a; 首先我們要創建一個順序表&#xff0c;順序表…

關于Mars3d的入門

關于Mars3d的入門 一. 創建地球&#xff0c;加載瓦片圖層二 矢量圖層2.1 常用矢量圖層2.1.1 GraphicLayer2.1.2 GeoJsonLayer 2.2 矢量圖層的點擊事件 三 矢量數據四 事件機制 一. 創建地球&#xff0c;加載瓦片圖層 // 1. 創建地球let map new mars3d.Map("mars3dContai…

基于openStreetMap的路徑規劃ROS功能包

文章目錄 概要OSM是什么主要特點主要組成部分使用場景如何獲取OSM常規參數配置笛卡爾坐標系原點經緯度設置編譯和運行如何規劃演示效果概要 由于https://github.com/MichalDobis/osm_planner存在一些使用問題,不是那么方便,我對其進行了一些修改,便于進行起點到終點進行路徑…

數據如何查詢

分組查詢 分組查詢&#xff08;Group By&#xff09;是在關系型數據庫中用來對數據進行分組并對每個組應用聚合函數的一種操作。這種查詢通常結合聚合函數&#xff08;如 COUNT、SUM、AVG、MAX、MIN 等&#xff09;使用&#xff0c;用于在查詢結果中生成匯總信息 特點(聚合)&am…

從零開始做題:My_lllp

題目 給出一張png圖片 解題 ┌──(holyeyes?kali2023)-[~/Misc/題目/zulu/My_lllp] └─$ python2 lsb.py extract my_lllp.png out.txt my_lllp [] Image size: 1080x1079 pixels. [] Written extracted data to out.txt. ┌──(holyeyes?kali2023)-[~/Misc/題目/zul…

python的線程池和進程池

Python 3.2 就已經引入了 concurrent.futures 模塊&#xff0c;提供了線程池&#xff08;ThreadPoolExecutor&#xff09;和進程池&#xff08;ProcessPoolExecutor&#xff09;&#xff0c;用于簡化并發編程的管理和調度。 ThreadPoolExecutor 在ThreadPoolExecutor 是 conc…

簡易Qt串口助手

界面顯示如下 關于串口類 初始化 設置串口號 設置波特率 打開串口 發送按鈕功能實現 接收數據顯示在控件中 關閉串口

使用 MFA 保護對企業應用程序的訪問

多因素身份驗證&#xff08;MFA&#xff09;是在授予用戶訪問特定資源的權限之前&#xff0c;使用多重身份驗證來驗證用戶身份的過程&#xff0c;僅使用單一因素&#xff08;傳統上是用戶名和密碼&#xff09;來保護資源&#xff0c;使它們容易受到破壞&#xff0c;添加其他身份…

springboot非物質文化遺產管理系統-計算機畢業設計源碼16087

目錄 摘要 1 緒論 1.1 選題背景與意義 1.2國內外研究現狀 1.3論文結構與章節安排 2系統分析 2.1 可行性分析 2.2 系統流程分析 2.2.1系統開發流程 2.2.2 用戶登錄流程 2.2.3 系統操作流程 2.2.4 添加信息流程 2.2.5 修改信息流程 2.2.6 刪除信息流程 2.3 系統功能…

前端開發過程中經常遇到的問題以及對應解決方法 (持續更新)

我的朋友已經工作了 3 年&#xff0c;他過去一直擔任前端工程師。 不幸的是&#xff0c;他被老板批評了&#xff0c;因為他在工作中犯了一個錯誤&#xff0c;這是一個非常簡單但容易忽視的問題&#xff0c;我想也是很多朋友容易忽視的一個問題。 今天我把它分享出來&#xff…