博客 RSS 訂閱

fromin 頭像

Fromin - 全新的postmessage庫特性介紹與源碼解析

眾所周知，postMessage 是在不同頁面間進行通信的一種常用方式: window.postMessage() 方法可以安全地實現跨源通信。通常，對於兩個不同頁面的腳本，只有當執行它們的頁面位於具有相同的協議（通常為https），端口號（443為https的默認值），以及主機 (兩個頁面的模數 Document.domain設置為相同的值) 時，這兩個腳本才能相互通信。window.postM

通信 , postmessage , 前端

收藏 評論

vleedesigntheory 頭像

維李設論 - postMessage踩坑實踐

前言 在低代碼編輯器中進行頁面預覽常常不得不用到iframe進行外鏈的url引入，這就涉及到了預覽頁面與編輯器頁面數據通信傳值的問題，常常用到的方案就是postMessage傳值，而postMessage本身在eventloop中也是一個宏任務，就會涉及到瀏覽器消息隊列處理的問題，本文旨在針對項目中的postMessage的相關踩坑實踐進行總結，也為想要使用postMessage傳遞數據的童鞋提供

iframe , 編輯器 , 低代碼 , postmessage , 跨域

收藏 評論

kinglisky 頭像

臼犀 - JSON-RPC & postMessage 談談瀏覽器消息通信的封裝技巧

楔子 postMessage 常見於內嵌 iframe 或是 Web Workers 中，用於跨頁面（線程） 的消息通信，在一些其他開發環境中也能看到類似的影子，如 Chrome 插件環境、Electron 環境、figma 插件等。 最近的工作需要經常與 iframe 與 Web Workers 打交道，處理頁面與內嵌頁、主線程與 worker 通信，擼了個用於處理瀏覽器消息通信的處理的工具庫

json-rpc , webworker , postmessage , typescript , 前端

收藏 評論

simonbaker_5ec61c266b1df 頭像

simonbaker - window.name和postMessage跨域詳解

文章不易，請關注公眾號 毛毛蟲的小小蠟筆，多多支持，謝謝。 概念 window.name 1、在一個窗口還沒關閉之前，同一個窗口的所有頁面都共享同一個window.name。 這個窗口可理解為chrome瀏覽器的一個tab標籤頁面。另外，從一個頁面中跳轉到另一個頁面後，這些頁面都共享同一個window.name。 2、每個頁面都能讀和寫window.name。 這個可能就是安全問題的來源。 3、w

postmessage

收藏 評論

steven_code 頭像

Steven - 窗口間通信方案——postMessage

postMessage 是 html5 引入的 API，postMessage 方法允許來自不同源的腳本採用異步方式進行通信，其實同源不同頁面的腳本也可以採用 postMessage 方法進行通信。 介紹 發送數據 需要在接收數據窗口的全局對象下調用該方法。 targetWindow.postMessage(message, targetOrigin, [transfer]) targetWi

postmessage , 前端 , html5 , Javascript

收藏 評論

mosquito_612af76da10ff 頭像

mosquito - iframe跨域的幾種常用方法

在開發日常中，會遇到使用iframe嵌套其他頁面，想要與嵌套頁面進行交互，常常會涉及到跨域問題，何為跨域？這涉及到同源策略，即協議、端口、域名相同則為同源 違反了同源策略就會出現跨域問題，主要表現為以下三方面： 1.無法讀取cookie、localStorage、indexDB 2.DOM無法獲得 3.ajax請求無法發送 解決方法 一、設置domain 前提條件：這兩個域名必須

iframe , vue.js , iframe跨域 , postmessage , 前端

收藏 評論

zxl20070701 頭像

zxl20070701 - postMessage

此方法可以用於實現跨源通信等，我們來演示如何實現在兩個窗口之間進行通信。 假設我們現在有兩個頁面：page1.html和page2.html， 他們的關係是通過iframe關聯起來的，就像這樣（下面是page1.html的內容）： iframe id="receiver" src="./page2.html" width="300" height="100"/iframe 為了實現通信，首先你需要

iframe , postmessage , 前端 , html5 , Javascript

收藏 評論

meathill 頭像

Meathill - 使用 `postMessage` 跨域名遷移 `localStorage`

朋友的網站有個需求：要從 A 域名遷移到 B 域名。所有內容不變，只是更改域名。這個需求不復雜，理論上改下配置然後 301 即可。但這個網站是純靜態網站，用户數據都存在 localStorage 裏，所以他希望能夠自動幫用户把數據也遷移到新域名。 我們知道，localStorage 是按照域名存儲的，B 網站無法訪問 A 網站的 localStorage。所以我們就需要一些特殊的手段來實現需求。經

vue.js , postmessage , challenge , 跨域 , Javascript

收藏 評論

simonbaker_5ec61c266b1df 頭像

simonbaker - 不同tab頁的數據如何保持一致？

背景 後端同事提了個問題： 當打開實例詳情頁面後，再打開一個tab頁面，然後再訪問實例詳情頁面。如果這時候在某一個tab頁面切換到不同實例了，然後去到另一個tab頁面進行實例的操作，比如升級或者停止。會誤以為當前操作的是同一個實例。但很明顯兩個tab頁的實例是不一樣的，這樣很容易出現誤操作。 所以就想要保持不同tab頁的數據統一。也就是在tab頁面切換實例後，其他tab頁也要跟着切換到該實例。 解

postmessage , storage

收藏 評論

openeuler 頭像

openEuler - RISC-V SIG 新進展：Chromium 等多個桌面軟件登錄歐拉開源操作系統

近日，RISC-V SIG 成功將 Chromium 等桌面軟件適配到 openEuler RISC-V，這是繼 openSUSE 之後第二個跑起來 Chromium 的 RISC-V 發行版。作為桌面應用的核心軟件，瀏覽器決定着一個操作系統整體的用户體驗。目前，RISC-V SIG 已經為 openEuler RISC-V 適配完成 Chromium 和 Firefox 兩大開源瀏覽器。此外，K

操作系統 , openeuler , risc-v , firefox , Linux

收藏 評論

segmentfault 頭像

SegmentFault思否 - ChatGPT for SegmentFault 插件發佈！

ChatGPT for SegmentFault 是一個瀏覽器插件，幫助你在思否社區查看 ChatGPT 針對每個問題的回答，在你等待人工回答的同時，快速獲取到 AI 提供的回答。 社區用户間相互幫助會產生更多交流，答案中通常包含一些自己的驗證和經驗的融入，但往往時效性沒那麼強，ChatGPT 是一個比較好的補充。 效果預覽： https://www.bilibili.com/vide... 使用

chrome , edge , firefox , chatgpt

收藏 評論

wosign 頭像

沃通CA - Firefox火狐瀏覽器顯示你的連接不安全，是什麼意思？

當 Firefox 連接到一個安全的網站時（網址最開始為“https://”），它必須確認該網站出具的證書有效且使用足夠高的加密強度，以充分保護您的隱私。如果證書無法通過驗證，或加密強度過低，Firefox 會中止連接到這個網站，並向您顯示SSL證書錯誤信息頁面：“你的連接不安全”。 什麼情況下出現“你的連接不安全”？ 出現“你的連接不安全”問題，有多種情況。常見的情況有以下幾種： （1）證書不

ssl , ssl證書 , HTTPS , firefox

收藏 評論

sysin 頭像

sysin - Firefox 120, Chrome 120, Chromium 120 官網離線下載

Firefox 120, Chrome 120, Chromium 120 官網離線下載 (macOS, Linux, Windows) Mozilla Firefox, Google Chrome, Chromium, Apple Safari 請訪問原文鏈接：https://sysin.org/blog/chrome-firefox-download/，查看最新版。原創作品，轉載請保留出處。

safari , chrome , 瀏覽器 , firefox

收藏 評論

eolink 頭像

Eolink - 5分鐘上手瀏覽器插件測試——Eolink Apikit

Eolink Apikit 研發管理和自動化測試產品中，提供了多種發起 API 測試的方式： 服務器測試：通過 Eolink Apikit 官方遠程服務器發送請求，不需要安裝任何插件，但是無法訪問本地服務器(localhost)、內網、局域網。 插件測試：通過 Eolink Apikit 官方瀏覽器插件發送請求，需要安裝 Chrome 或者 Firefox 插件，可訪問本地服務器(local

chrome , 插件 , 瀏覽器 , API , firefox

收藏 評論

code4world 頭像

碼上世界 - 麒麟操作系統 (kylinos-x64) 從入門到精通 - 辦公環境 - 第7篇 安裝最新版本瀏覽器

0. 基礎環境 類別：筆記本 硬件：Intel,Amd等x86_64處理器 系統：銀河麒麟操作系統 V10（SP1）2303-update2 關鍵詞： 信創,麒麟系統,linux,PKS,銀河麒麟,amd64,x86_64,x64,firefox,chrome,microsoft edge 1. 需求背景 銀河麒麟系統中自帶了許多瀏覽器，我個人還是喜歡firefox

chrome , edge , 信創 , firefox , chromium

收藏 評論

huitailangdeqingyu_620f185a1b3e3 頭像

灰太狼的情與殤 - 火狐瀏覽器無法打開axure原型圖

1.電腦系統ubuntu24.24LTS 2.火狐瀏覽器無法打開axure原型圖解方法: 打開火狐瀏覽器 進入設置: about:config進入配置 修改security.fileuri.strict_origin_policy為falsse 可以直接 進行搜索 security.fileuri.strict_origin_policy 3.修改原型文件的resources\script

ubuntu16.04 , firefox

收藏 評論

wosign 頭像

沃通CA - 如何在 Chrome 和 Firefox 中禁用 HSTS？

您是否在 Chrome 或 Firefox 上遇到令人沮喪的HSTS 錯誤？不要絕望！本詳細指南專為您設計。 我們將引導您瞭解它是什麼、為什麼會遇到錯誤，以及最重要的是，如何在 Chrome 和 Firefox 中禁用 HSTS。 通過我們簡潔的步驟和清晰的解釋，您可以立即修復此技術錯誤。讓我們開始吧！ 什麼是 HSTS？ HSTS代表HTTP 嚴格傳輸安全，是一種網絡安全策略機制，有助於保護網

chrome , firefox , hsts

收藏 評論

sysin 頭像

sysin - Firefox 135, Chrome 135, Chromium 135 官網離線下載

Firefox 135, Chrome 135, Chromium 135 官網離線下載 (macOS, Linux, Windows) Mozilla Firefox, Google Chrome, Chromium, Apple Safari 請訪問原文鏈接：https://sysin.org/blog/chrome-firefox-download/ 查看最新版。原創作品，轉載請保留出處。

firefox

收藏 評論

rentian 頭像

任天鏜 - navigator.mediaDevices.getUserMedia undefined問題解決

navigator.mediaDevices.getUserMedia只有在https或者localhost下使用。 如果需要再http協議下使用navigator.mediaDevices.getUserMedia，需要打開不安全的配置。 火狐瀏覽器打開多媒體不安全的配置： chomre打開不安全配置： 瀏覽器輸入chrome://flags/ 搜索Insecure o

chrome , firefox , HTML , 前端 , Javascript

收藏 評論

springsmell 頭像

SpringSmell - C++ Boost::asio使用示例

背景情況 vsomip中使用了boost::asio作為通信框架，所以有必要學習使用一下。 本文不涉及原理。 示例 服務端 客户端 同步/異步客户端 boost_client.h #ifndef BOOST_CLIENT_H #define BOOST_CLIENT_H #include "boost/asio.hpp" #define BLOCK_SIZE 64 * 102

socket.io , 網絡編程 , asio

收藏 評論

cbuc 頭像

寫做 - 《 Socket.IO》 解決 WebSocket 通信！

大家好呀，我是小菜~ 本文主要介紹 Socket.IO 微信公眾號已開啓，小菜良記，沒關注的同學們記得關注哦！ 在介紹 Socket.IO 之前, 我們先考慮一個問題, 如果這個時候有個需求, 類似實現人工客服的功能該如何實現? 在線客服，需求理解起來很簡單，就相當於一個 web 的聊天頁面，也就是客户端能夠 即時拉取到服務端的響應 當然, 作為接口工程師, 這並不是一個很難

通信協議 , socket.io , 通信 , websocket , socket

收藏 評論

flydean 頭像

flydean - 網絡協議之:socket協議詳解之Socket和Stream Socket

簡介 不管是在普通的網絡編程中還是在netty中，都經常會提到一個詞叫做socket，好像socket是一個神奇的東西，使用socket我們可以建立客户端到服務器端的連接，並且和進行客户端和服務器端的通訊，那麼socket到底是什麼呢？它有哪些分類呢？一起來看看吧。 Socket是什麼 socket的中文翻譯是套接字，個人覺的這個翻譯真的是太差勁了，套接字聽起來毫無意義，所以很多人在第一次聽到so

socket.io , socket , netty , JAVA

收藏 評論

banxiazhimo 頭像

半夏之沫 - Redis-單線程模型

大家好，我是半夏之沫 😁😁 一名金融科技領域的JAVA系統研發😊😊 我希望將自己工作和學習中的經驗以最樸實，最嚴謹的方式分享給大家，共同進步👉💓👈 👉👉👉👉👉👉👉👉💓寫作不易，期待大家的關注和點贊💓👈👈👈👈👈👈👈👈 👉👉👉👉👉👉👉👉💓關注微信公眾號【技術探界】 💓👈👈👈👈👈👈👈👈 前言

socket.io , redis , socket , socket服務端 , reactor

收藏 評論

kanjianliao 頭像

看見了 - 【WebSocket】總結

websocket 協議概述 Webscoket是Web瀏覽器和服務器之間的一種全雙工通信協議，其中WebSocket協議由IETF定為標準，WebSocket API由W3C定為標準。一旦Web客户端與服務器建立起連接，之後的全部數據通信都通過這個連接進行。通信過程中，可互相發送JSON、XML、HTML或圖片等任意格式的數據。 websocket是基於TCP的一個應用協議，與HTTP協議的關聯

socket.io , websocket

收藏 評論