Web Page Editing via Isolated Subframe and Data Attributes
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Existing web page editing systems often disrupt the layout of modified web pages, risking browser crashes or functionality issues when injecting scripting languages like JavaScript for editing and styling.
Innovation Solution
A content management system that uses a component-based approach with a subframe (iframe) to isolate editing functions, allowing manipulation of web page components without altering the original DOM structure, employing a REST interface and data attributes to manage component configurations and user interactions.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Adaptability or versatility
If scripting language code and style sheets are injected into the web page for editing functionality, then the authoring capability is improved, but the layout stability deteriorates causing the web page to break or display differently than intended
Solution Approach 1:
The patent segments the web page into an editable component hierarchy where only specific components are made editable through data attributes, rather than injecting editing functionality throughout the entire page. This segmentation allows editing capabilities to be applied selectively to individual components without affecting the overall page layout stability.
Solution Approach 2:
The patent introduces data attributes as an intermediary layer between the original web page content and the editing functionality. These attributes store component configuration information and enable editing operations without directly modifying the original DOM structure, thus preventing layout breaks while maintaining authoring capability.
2Ease of operation
If editing functionality is added to the web page, then the ease of operation is improved, but the reliability deteriorates risking browser crashes or functionality issues
Solution Approach 1:
The patent performs preliminary actions by pre-defining component configurations and editing capabilities through data attributes before the user interacts with the page. This allows the editing functionality to be pre-configured and isolated, reducing the risk of runtime errors or browser crashes during user editing operations.
Solution Approach 2:
The patent creates a copy of component information through data attributes that reference the original components. Editing operations work on these attribute-based copies rather than directly manipulating the original DOM elements, which prevents corruption of the original page structure and maintains browser reliability.
3Adaptability or versatility
If the original DOM structure is modified for editing, then the adaptability is improved allowing component manipulation, but the manufacturing precision deteriorates causing layout changes
Solution Approach 1:
The patent adds another dimension to the web page structure by introducing data attributes as a parallel layer to the DOM. Component manipulation occurs through modifying attribute values in this additional dimension rather than changing the original DOM structure, thus maintaining layout precision while enabling adaptability.
Solution Approach 2:
Data attributes serve as an intermediary that mediates between component manipulation requests and the original DOM structure. All editing operations are routed through attribute modifications, which act as a buffer that preserves the precision of the original layout while enabling flexible component manipulation.
Data Source
AI summary
An editable version of a first web page may be created by first forming a second web page having the first web page as an inline frame. Then an outer frame of the second web page can be created, the outer frame designed to cause a browser rendering the second web page to create objects in the outer frame placed over corresponding objects in the first web page in the inline frame such that user attempts at interaction with the corresponding objects in the first web page are intercepted by the objects in the outer frame.