iframe | BestHub

360 Zhihui Cloud Developer

Jun 9, 2025 · Frontend Development

Choosing the Right Micro‑Frontend Strategy: Qiankun vs Umi Micro vs Iframe

This article compares two micro‑frontend frameworks (Qiankun and Umi Micro) and an iframe‑based solution, detailing their principles, feature comparisons, pros and cons, integration costs, typical scenarios, common pitfalls, and improvement plans to help developers select the most suitable approach for multi‑platform product integration.

Frontend Architectureiframemicro-frontend

0 likes · 15 min read

Choosing the Right Micro‑Frontend Strategy: Qiankun vs Umi Micro vs Iframe

Rare Earth Juejin Tech Community

Nov 5, 2024 · Frontend Development

Comprehensive Guide to Using iframe in Web Frontend: Responsive Sizing, Dynamic Height, Cross‑Domain Communication, and Security

This article provides a detailed tutorial on iframe usage in web front‑end development, covering responsive sizing based on the parent window, dynamic height adjustment via postMessage, handling HTTP/HTTPS mismatches, cross‑origin issues, and security considerations such as X‑Frame‑Options.

Cross-OriginNginxProxy

0 likes · 13 min read

Comprehensive Guide to Using iframe in Web Frontend: Responsive Sizing, Dynamic Height, Cross‑Domain Communication, and Security

Rare Earth Juejin Tech Community

Jun 27, 2024 · Frontend Development

Understanding Micro Frontends: Concepts, Scenarios, and Solution Comparisons

This article explains what micro frontends are, the problems they address, suitable application scenarios, key technical concerns such as communication, state management, sandboxing, routing, and pre‑loading, and compares popular implementations like nginx forwarding, pure iframe, qiankun, micro‑app, Module Federation, and wujie.

Frontend ArchitectureWeb Componentsiframe

0 likes · 26 min read

Understanding Micro Frontends: Concepts, Scenarios, and Solution Comparisons

58 Tech

Feb 28, 2023 · Frontend Development

Achieving True WYSIWYG in Low‑Code Editors: Editing Layer and Rendering Layer Design

This article explains how a low‑code editor can provide true WYSIWYG editing by separating the canvas into an editing layer and a rendering layer, using an iframe for isolation, synchronizing layout information via DOM measurements, and addressing the challenges of component overlap, performance, and cross‑technology integration.

WYSIWYGcanvaseditor design

0 likes · 11 min read

Achieving True WYSIWYG in Low‑Code Editors: Editing Layer and Rendering Layer Design

Ctrip Technology

Oct 27, 2022 · Frontend Development

Lingjie Page-Level Micro‑Frontend Framework: Principles, Types, and Practical Usage

This article introduces the Lingjie page‑level micro‑frontend solution, explains the concept and types of micro‑frontends, describes its design principles and iframe‑based architecture, outlines core features, and provides step‑by‑step guidance for integrating and optimizing applications with Lingjie.

Frontend Architectureiframemicro-frontend

0 likes · 15 min read

Lingjie Page-Level Micro‑Frontend Framework: Principles, Types, and Practical Usage

政采云技术

Jul 26, 2022 · Frontend Development

Frontend Rich Text Basics and Implementation

This article introduces the concept of rich text in the frontend, explains two primary input methods (iframe with designMode and contenteditable elements), details the Selection API for handling text ranges, demonstrates toolbar commands using execCommand, and provides complete demo code for building a simple rich‑text editor.

ContentEditableRich TextexecCommand

0 likes · 15 min read

Frontend Rich Text Basics and Implementation

JD Retail Technology

Jul 4, 2022 · Frontend Development

Iframe State Preservation and Vue Patch Mechanism Exploration

This article examines how iframe state can be preserved in a Vue‑based platform by using CSS display toggling, introduces an iframe resource pool with a competition eviction strategy, and analyzes Vue's patch algorithm and DOM insertBefore behavior to propose a solution that avoids unwanted iframe refreshes.

Patchiframeperformance

0 likes · 10 min read

Iframe State Preservation and Vue Patch Mechanism Exploration

Rare Earth Juejin Tech Community

Apr 15, 2022 · Frontend Development

Designing a Unified Browser Message Communication Library (rpc-shooter) with TypeScript Interfaces and JSON-RPC

This article explains how to build a versatile browser message‑communication library that works across iframes, Web Workers, ServiceWorkers, BroadcastChannel and other MessagePort‑like objects, using a unified interface design, TypeScript typings, event‑driven architecture and JSON‑RPC for reliable remote procedure calls.

JSON-RPCRPCTypeScript

0 likes · 13 min read

Designing a Unified Browser Message Communication Library (rpc-shooter) with TypeScript Interfaces and JSON-RPC

vivo Internet Technology

Mar 23, 2022 · Frontend Development

Product Middle Platform Front-end Practice: Micro-frontend Architecture and Visualization Technology Implementation

The article details how an e‑commerce product middle platform’s front‑end employs visualization technology, a uni‑render approach that shares a Vuex store between an iframe and its parent via a sandboxed Vue instance, and a qiankun‑based micro‑frontend architecture, while addressing cross‑domain and editor integration challenges.

Frontend ArchitectureVuexe-commerce

0 likes · 13 min read

Product Middle Platform Front-end Practice: Micro-frontend Architecture and Visualization Technology Implementation

JD Tech

Mar 16, 2022 · Frontend Development

An Overview of Micro Frontends: Concepts, Characteristics, Implementation Options, and Use Cases

This article provides a comprehensive introduction to micro frontends, explaining their definition, benefits such as independence and scalability, detailing various implementation approaches like iframe, Module Federation, EMP, single‑spa, qiankun, icestark, garfish, Fronts and Web Components, and outlining the essential framework functions and suitable scenarios.

Frontend ArchitectureWeb Componentsiframe

0 likes · 11 min read

An Overview of Micro Frontends: Concepts, Characteristics, Implementation Options, and Use Cases

Tongcheng Travel Technology Center

Sep 17, 2020 · Frontend Development

Micro‑Frontend Architecture: Benefits, Implementation Options, and Technical Details

This article explains why rapid business growth and rising development costs push teams toward a micro‑frontend architecture, compares monolithic and micro‑frontend approaches, outlines four implementation patterns, presents the chosen Vue‑based tech stack, and shares code snippets for communication, scrolling, and build‑time optimizations.

Frontend ArchitectureVueiframe

0 likes · 15 min read

Micro‑Frontend Architecture: Benefits, Implementation Options, and Technical Details

政采云技术

Jul 19, 2020 · Frontend Development

Developing Cross‑Framework UI Components with Native JavaScript and Iframe Containers

This article explains how to design and implement reusable UI components that work across jQuery, React, and Vue by using a native‑JS container, iframe isolation, and communication techniques such as domain sharing, postMessage alternatives, and Nginx proxying, while providing code examples and practical tips.

ComponentVanilla JSWeb Development

0 likes · 12 min read

Developing Cross‑Framework UI Components with Native JavaScript and Iframe Containers

TAL Education Technology

Feb 21, 2020 · Frontend Development

Micro Frontend Architecture: Concepts, Benefits, and Practical Implementation Guide

This article explains the background, core concepts, advantages, and various implementation approaches of micro frontends, and provides a step‑by‑step guide—including project setup, configuration, communication, and optimization—using Vue, single‑spa, and related tools.

Frontend ArchitectureVueiframe

0 likes · 11 min read

Micro Frontend Architecture: Concepts, Benefits, and Practical Implementation Guide