tag iframe

標籤
貢獻15
69
07:56 AM · Nov 06 ,2025
dirackeeko 頭像 tosmile 頭像 parksben 頭像 grewer 頭像 puffer 頭像 shiwangdeshuanggang_ejn3li 頭像 sihaihande 頭像 jdcdevloper 頭像 even_5ac21d3322069 頭像 toopoo 頭像 vleedesigntheory 頭像 mosquito_612af76da10ff 頭像

@iframe / 博客 RSS 訂閱

tosmile 頭像

浪遏飛舟 - 如何將iframe封裝成一個組件

背景 在使用 Electron 桌面應用時，有時我們需要將其他平台上的業務頁面嵌入到桌面應用中，以便快速滿足業務需求。 這種需求的優勢在於可以重用已有的業務頁面，無需重新開發桌面應用的界面和功能，從而節省時間和資源。通過將其他端的業務頁面嵌入桌面應用中，我們可以快速將現有的功能和用户界面帶入桌面環境，提供一致的用户體驗。 雖然 Electron 框架提供 webview 標籤來幫助我們嵌入其他端的

iframe , webview , electron

收藏 評論

parksben 頭像

parksben - 告別 iframe 通信的 “飛鴿傳書”：Webpage Tunnel 上手指南

作為前端開發，你一定遇到過這樣的場景： 老闆拍着你的肩膀説：“小王啊，把隔壁組做的那個‘用户畫像’頁面，直接用 iframe 嵌到我們的後台裏吧，順便把當前登錄的 Token 傳過去，再把用户選好的標籤拿回來。” 你心想：“這簡單，頁面跨 iframe 可以用 postMessage 方法通信。” 然而當你開始寫代碼時，噩夢開始了。 😫 以前的痛苦：像在用對講機吵架 為了在父頁面和 iframe

iframe , typescript , npm , 前端 , Javascript

收藏 評論

dirackeeko 頭像

DiracKeeko - [Vue] 在vue中接收iframe的傳遞的信息

頁面A中有一個iframe標籤。iframe標籤的src屬性指向的跨域頁面B，跨域頁面B通過postMessage方式傳遞信息。現在在頁面A中想要獲取跨域頁面B傳遞來的信息。 實現方式是監聽A頁面的"message"事件。考慮是vue2框架。其實現方式與原生html有稍許不同。 在vue的mounted生命週期裏添加 mounted() { window.addEventListener("

iframe , message , vue.js , 前端

收藏 評論

dirackeeko 頭像

DiracKeeko - [html] <iframe>標籤使用 iframe&target的三種表現

1、target == iframe.name，點擊p標籤，在iframe中展示新頁面。 iframe src="demo_iframe.htm" name="iframe_a" height="300px" width="100%" title="Iframe Example"/iframe pW3Schools.com/p 2、target != iframe.name，點擊p標籤

iframe , target , HTML , html5

收藏 評論

grewer 頭像

Grewer - 淺析微前端沙箱

前言 在大型項目中，微前端是一種常見的優化手段，本文就微前端中沙箱的機制及原理，作一下講解。 首先什麼是微前端 Techniques, strategies and recipes for building a modern web app with multiple teams that can ship features independently. -- Micro Frontends

iframe , qiankun , 微前端 , 前端 , Javascript

收藏 評論

puffer 頭像

河豚學前端 - 微前端選擇qiankun還是iframe？

前言 微前端是什麼？微前端是一種架構模式，將整個應用拆分成多個獨立的模塊，這些模塊可以獨立開發、部署。我在業務中遇到的2次都是先開發了多個小項目，然後這些小項目在業務上有一定的聯繫，都屬於同一類，產品就希望可以聚合成一個大項目，有一個統一的入口。 技術選型 技術選型大概有2種，一種是使用框架，比如qiankun、無界等，一種是使用iframe引入子項目。那如何選擇適合自己項目的方案呢？這2種我都用

iframe , 微前端 , 前端

收藏 評論

shiwangdeshuanggang_ejn3li 頭像

失望的雙槓_eJN3LI - iframe從入門到入門

概念 iframe 是 HTML 中用於在一個網頁中嵌入另一個網頁的元素。它的全稱是 "inline frame"。通過 iframe，你可以在一個頁面中顯示來自其他網站的內容，或者在同一網站內加載其他頁面。 iframe 的基本結構 iframe src="URL" width="寬度" height="高度" frameborder="邊框" allowfullscreen="允許全屏" na

iframe , html5

收藏 評論

sihaihande 頭像

漢得數字平台 - 告別集成煩惱！H-ZERO iframe 支持第三方系統 / AI 助手輕鬆接入

一、引言 在企業數字化進程中，“系統集成” 常常是繞不開的難題 —— 想在核心平台嵌入第三方工具，卻被跨應用交互卡殼；想給現有系統快速添加 AI 助手，開發成本又高。這些痛點不僅拖慢業務效率，更讓數字化升級 “卡脖子”。 而 H-ZERO 的 iframe 集成能力，正是為解決這些問題而來。無論是將第三方系統無縫融入自身平台，還是幫第三方系統快速接入 AI 助手，它都能以輕量化方式突破壁壘，讓集

iframe , 前端

收藏 評論

jdcdevloper 頭像

京東雲開發者 - Iframe在Vue中的狀態保持技術 | 京東雲技術團隊

引言 Iframe是一個歷史悠久的HTML元素，根據MDN WEB DOCS官方介紹，Iframe定義為HTML內聯框架元素，表示嵌套的Browsing Context，它能夠將另一個HTML頁面嵌入到當前頁面中。Iframe可以廉價實現跨應用級的頁面共享，並且具有使用簡單、高兼容性、內容隔離等優點，因此以Iframe為核心形成了前端平台架構領域第1代技術。 眾所周知，當Iframe在DOM中初

iframe , vue.js , iframe跨域 , HTML , html5

收藏 評論

even_5ac21d3322069 頭像

Even - IFrame跨域通訊的幾種方法

在項目中遇到頁面中嵌入IFrame（主頁面和框架頁為不同域名）時，由於同源策略，主頁面和IFrame內頁無法通訊的問題。 同源策略是一個很重要的安全理念，它在保證數據的安全性方面有着重要的意義。同源策略規定跨域之間的腳本是隔離的，一個域的腳本不能訪問和操作另外一個域的絕大部分屬性和方法。那怎樣是相同的域呢？當兩個域具有相同的協議(如http), 相同的端口(如80)，相同的host（如www.ex

iframe , postmessage , 跨域

收藏 評論

toopoo 頭像

zhoutao - JSONP原理及JQUERY JSONP的使用

JSONP原理 JSON和JSONP 　　JSON(JavaScript Object Notation)是一種輕量級的數據交換格式。對於JSON大家應該是很瞭解了吧，不是很清楚的朋友可以去json.org上了解下，簡單易懂。 　　JSONP是JSON with Padding的略稱。它是一個非官方的協議，它允許在服務器端集成Scripttags返回至客户端，通過javascriptcallbac

iframe , postmessage , Javascript

收藏 評論

vleedesigntheory 頭像

維李設論 - postMessage踩坑實踐

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

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

收藏 評論

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

收藏 評論

jsoncode 頭像

jsoncode - 如何顯示防盜鏈的外站圖片

鄭重警告：本文止於技術研究，請勿在自己的生產環境使用他人圖片資源。 通常在開發測試環節，一些資源圖片會出現防盜鏈的錯誤提示，本文就通過前端基礎技術，實現基本的圖片跨站顯示效果。 防盜鏈的原理： 服務端通過請求頭的request.headers.referer來判斷是否是自己資源白名單的請求來源。 如果referer=null,則無法判斷來源，會正常顯示圖片。 所以基於以上理論，可以給圖片創

iframe , 圖片 , 防盜鏈

收藏 評論

steven_code 頭像

Steven - 微前端的靠譜實現方案 —— iframe

一年多之前，為了能在老舊的 Vue 項目中開發 React 頁面，特地調研了一些主流的微前端框架：qiankun、無界等等。但都發現其實現的方案無法擺脱 JavaScript 的限制，不是 100%的將多個框架分離開，實施過程中，坑太多。於是採用了iframe這個天然的沙箱，將多個框架 100%分離開。從現在的角度來看，這個技術選型依然是正確的。接下來，詳細介紹一下iframe。 介紹 ifram

iframe , 瀏覽器原理 , 微前端

收藏 評論