Dynamic IFrame Expansion for Cross-Domain Content Rendering

Resolve Bottlenecks,
Find Innovative SolutionsGenerate Solutions

Solution Overview

Problem

Existing methods for integrating multiple HTML-based graphical user interfaces into a single coherent interface face scalability issues and are complicated by the need for standalone development and differing UI libraries, with sandboxing restrictions preventing third-party content from fully rendering visual components outside designated IFrame areas.

Innovation Solution

The method involves temporarily expanding the size of an IFrame area to cover the entire webpage when third-party content needs to break out of its designated area for rendering, allowing features like modals to function correctly while maintaining security by ensuring all content is from the same domain.

Engineering Contradictions & Design Principles

VSEngineering Contradiction Analysis

1Reliability

If sandboxing is applied to restrict IFramed content, then security is improved, but the ability to render visual components outside the IFrame area is worsened

Engineering Contradiction:

ImprovesecurityVSAvoidability to render visual components outside IFrame

Core Design Contradiction:

ReliabilityVSAdaptability or versatility

Solution Approach 1:

The IFrame area size is made dynamic and can be expanded when needed. When a feature requests to break out of the IFrame area, the system expands the IFrame area to cover the necessary region, allowing the feature to render visually outside the original constraints while maintaining the sandboxing security model. The IFrame area can be reduced back to its original size after the feature completes.

Inventive Principle:

Principle #15Dynamics

2Ease of manufacture

If multiple UI libraries are used by different teams, then development independence is improved, but integration coherence is worsened

Engineering Contradiction:

Improvedevelopment independenceVSAvoidintegration coherence

Core Design Contradiction:

Ease of manufactureVSStability of the object's composition

Solution Approach 1:

The system introduces a shell as an intermediary layer that hosts multiple IFrame areas. Each IFrame can use different UI libraries and be developed independently by different teams. The shell provides a unified structure that integrates these independent UI components into a coherent overall interface, resolving the contradiction between development independence and integration coherence.

Inventive Principle:

Principle #24Intermediary (Mediator)

3Adaptability or versatility

If IFrame area is expanded to cover entire webpage, then feature rendering capability is improved, but interface components visibility is worsened

Engineering Contradiction:

Improvefeature rendering capabilityVSAvoidinterface components visibility

Core Design Contradiction:

Adaptability or versatilityVSEase of operation

Solution Approach 1:

The IFrame area size is dynamically adjusted based on feature requirements. When a feature needs to break out of the IFrame area, the system expands the IFrame area to cover the necessary region. After the feature completes, the IFrame area is reduced back to its original size, restoring the visibility of interface components. This dynamic resizing resolves the contradiction between feature rendering capability and interface components visibility.

Inventive Principle:

Principle #15Dynamics

Data Source

PatentUS10671797B2Unified graphical user interface views through frame break out

Publication Date: 2020.06.02 VMWARE INC

AI summary

When executing a feature of a frame (HTML document), a web browser utilizes a method for adjusting the size of the frame. The method includes expanding the size of the frame to cover at least a portion of the area of the interface components in response to a request for executing a feature of the frame. After expanding the size of the frame, the web browser executes the feature, wherein the feature renders a visual content within the expanded frame and disables the interface components within the expanded frame. Subsequently, responsive to another request, the web browser reduces the size of the expanded frame to an initial size of the frame.