Inline Frames (“Iframes”) are often used to embed third party content into a client's web page. This embedded third party content may be, for example, an advertisement, a YouTube video, a Facebook “like” button, or a Twitter feed. These Iframe components may be referred to, for example, as web plugins, apps, widgets, gadgets, modules, extensions, or simply plugins. In the interest of clarity, these Iframe components will be discussed herein as Iframes, although other examples of Iframe terminology may be used. The interaction between the embedded Iframe content in the client's web page and the third party web page may be referred to as “cross-domain” content management, because the embedded third party Iframe content may be hosted by a different domain (e.g., a third party server) than the domain of the client's web page.
Management and design of third party web plugins is usually managed by the third party website, or alternately may be managed with code. For example, a third party may offer several color choices for the color of a plugin button, which a client may wish to embed in his or her web page. In order to change the color of the button, the client must visit the third party website, use the third party tools to change to color, and finally, the client must often embed a new snippet of code in the client's web page. The client must then reload the web page in order to view the effect of the color change. This procedure is cumbersome and ineffective for quickly designing a plugin to fit attractively within the client's web page.
Techniques are generally described that include systems and methods for managing cross-domain web plugin content. An example method may include displaying web page content, including at least one Iframe displaying content from a remote domain, communicating design information regarding the web page content to the remote domain, and receiving the content from the remote domain for display in the Iframe, wherein the content has been updated in accordance with the design information.
The foregoing summary is illustrative only and is not intended to be in any way limiting. In addition to the illustrative aspects, embodiments, and features described above, further aspects, embodiments, and features will become apparent by reference to the drawings and the following detailed description.
The foregoing and other features of the present disclosure will become more fully apparent from the following description and appended claims, taken in conjunction with the accompanying drawings. Understanding that these drawings depict only several examples in accordance with the disclosure and are, therefore, not to be considered limiting of its scope, the disclosure will be described with additional specificity and detail through use of the accompanying drawings, in which:
all arranged in accordance with at least some embodiments of the present disclosure.
In the following detailed description, reference is made to the accompanying drawings, which form a part hereof. In the drawings, similar symbols typically identify similar components, unless context dictates otherwise. The illustrative examples described in the detailed description, drawings, and claims are not meant to be limiting. Other examples may be utilized, and other changes may be made, without departing from the spirit or scope of the subject matter presented herein. It will be readily understood that the aspects of the present disclosure, as generally described herein, and illustrated in the Figures, can be arranged, substituted, combined, separated, and designed in a wide variety of different configurations, all of which are implicitly contemplated herein.
This disclosure is drawn, inter alia, to methods, systems, products, devices, and/or apparatuses generally related to seamlessly managing embedded Iframe content. Generally, a client manages third party Iframe content on a client's web page through the third party's website and web tools. The client may then be required to update code on the client's website and may also need to refresh or reload the client's web page to reflect the changes. There is a need to simplify the process of updating Iframe content, so that third party Iframe content may be updated directly, dynamically, or even automatically from the client web page, eliminating the need to visit a third party website, update code, or refresh or restart the client's browser.
In some examples, a settings window for the Iframe may be provided that may allow a client to make real time changes to the embedded Iframe content. A local copy of the embedded content may be stored, and changes to the content may be made through the settings window, which may be viewed at the Iframe in real time. For example, the design elements of the content displayed in the Iframe may be changed or, in some examples, additional content may be added or subtracted (e.g., text, etc.). Changes may be made to the local copy of the content and viewed in the Iframe in real time without, for example, a need to log into or otherwise access the third party site that hosts the Iframe content. Once a final set of settings are chosen, the altered content may be saved back to a database on the hosting party site, and will appear in accordance with the final selected, and saved Iframe settings.
In some examples, code in a client web page may be configured to communicate design information about the client web page (e.g. font styles, background color) to the Iframe and the Iframe content may automatically incorporate the design information of the client web page in order to display Iframe content using similar or coordinating design information. Such design information may include, but is not limited to, font families, font sizes, font colors, font-weights, font-styles, background colors, shadows, margins, background, borders, directions, line-height, opacity, positioning, alignment, and padding. Such design information will collectively be referred to herein as style components.
System 100 may include client web page 101. Client web page 101 is a web page where the client's content is visible, and where one or more Iframes or plugins may be added. Client web page 101 may be hosted by a website builder, content management system, or may be hosted independently. Client web page 101 may be hosted on a different domain than that of hosting party 105, for example client domain 107. Client domain 107 may be a computer or a server, such as a webserver. Client web page 101 may be viewed by the client through a browser window of a browser, such as Apple Safari, Internet Explorer, Mozilla Firefox, Google Chrome, or the like. Hosting party 105 may be hosted by remote domain 107. Remote domain 107 may be a computer or a server, such as a web server. Client web page 101 may include client embedded code 102. Client embedded code 102 may be a scripting language written in, for example, Javascript, ActiveX, Java, Dart, TypeScript, or VBScript. Client embedded code 102 may be hosted by the client via client domain 107, the hosting party 105 via remote domain 106, a third party via third party domain 108, or by another party via another domain not illustrated.
Client embedded code 102 may interact with Iframe 103 through cross domain messaging (XDM). Client embedded code 102 may interact with other code on client web page 101, and may replace identifiable tags or shortcode with an Iframe, for example Iframe 103. Cross domain messaging may be described as when a web page or document hosted on a first domain, such as a first web server, interacts or communicates with a web page or document on a second domain, such as a second web server. Through cross domain messaging, content from a first domain may be updated from a second domain, and vice versa. Thus client embedded code 102 on client domain 107 may be capable of identifying particular tags or shortcodes that may indicate the client's desired placement of Iframe 103 from third party domain 108. Client embedded code 102 may create one or more Iframe views for Iframe 103 from third party domain 108 and client embedded code 102 may communicate with these Iframe views through cross domain messaging. Client embedded code 102, through cross domain messaging, may also receive size information and events from Iframe 103, and may resize Iframe 103 and also may send style components from client web page 101 to be saved on a database on third party domain 108. The style components may include, for example, font, style, color and uniform resource identifier (URI) information. A database on third party domain 108 may then be updated to reflect the style components from client web page 101.
Iframe 103 may contain the visual display and model data of the third party web plugin from third party domain 108 Through cross domain messaging, Iframe 103 may receive information about client web page 101, which may then be communicated to third party domain 108. Similarly, through cross domain messaging, Iframe 103 may send content size, design, and event information from third party domain 108 to client embedded code 102 on client domain 107. Iframe 103 may also be configured to trigger the opening or appearance of settings window 104 responsive to input from the client. Settings window 104 may be a pop-up window or menu, and may be configured to receive input from the client.
Settings window 104 may visually display options for the settings for Iframe 103 from third party domain 108 From settings window 104, the client may be able to update or change the settings for Iframe 103. When the client changes settings in Iframe 103 via settings window 104, the view of Iframe 103 will immediately re-render reflecting the changes. This real-time rendering of the changes is accomplished through communication between Iframe 103 and settings window 104, and does not require that client web page 101 be refreshed or reloaded. These changes in Iframe 103 may be displayed to the client before any changes are saved to the content at third party domain 108.
The following will describe an example operation according to an embodiment of the invention corresponding to
While the example system 100 discussed above with respect to
The foregoing discussion of updating Iframe content has been in terms of the client's actions in changing settings for style components from a settings window, such as settings window 104 or parent settings window 204, as described with respect to
An example process 300 may begin with block 301, which recites “initiating a request to render a client webpage.” Block 301 may be followed by block 302, which recites “rendering the client webpage responsive to the request.” Block 302 may be followed by block 303, which recites “analyzing and identifying style components of the client web page.” Block 303 may be followed by block 304, which recites “performing statistical analysis in order to compute style component statistical information.” Block 304 may be followed by block 305, which recites “passing the style component statistical information to the Iframe through cross domain messaging.” Block 305 may be followed by block 306, which recites “receiving the style component statistical information at the Iframe and dynamically visually rendering at the Iframe at least one design option based on at least some aspects of the style component statistical information.” Block 306 may be followed by block 307, which recites “choosing and saving a design option from at least one design option.”
The blocks include in the described example method are for illustration purposes. In some embodiments, the blocks may be performed in a different order. In some embodiments, various blocks may be eliminated. In still other embodiments, various blocks may be divided into additional blocks, supplemented with other blocks, or combined together into fewer blocks. Other variations of theses specific blocks are contemplated, including changes in the order of the blocks, changes in the content of the blocks being split or combined into other blocks, etc.
Block 301 recites “initiating a request to render a client web page.” The request may be initiated, for example by a user or client at a web browser, such as Internet Explorer, Google Chrome, Mozilla Firefox, Apple Safari, or the like. The client web page may be hosted, for example, by domain 107 or domain 207, as described with respect to
Block 302 recites “rendering the client web page responsive to the request.” The client web page may be rendered and displayed by the web browser to the user or client. Client web page may be rendered as client web page 101 or client web page 201, as described with respect to
Block 303 recites “analyzing and identifying style components of the client web page.” This analysis and identification may be performed by the client embedded code that “scrapes” the other code in the client web page in order to determine the style components contained within the client web page. The client embedded code may be, for example, client embedded code 102 or client embedded code 202 as described with respect to
Block 304 recites “performing statistical analysis in order to compute style component statistical information.” This statistical analysis may be performed by client embedded code, and may include the computation of at least one of mean, median, mode, range, standard deviation, standard variance, cluster analysis, or other statistical information regarding the style components of the client web page. For example, the client embedded code may compute style component statistical information for common HTML styles such as: average <p> font-size: 12 px; average <h2> font-size: 14 px; median <p> font color: #000; median <h2> font color #c0c0c0; page background color: #ccc; etc. The client embedded code may be, for example, client embedded code 102 or client embedded code 202, and may analyze client web page 101 or client web page 202 as described with respect to
Block 305 recites “passing the style component statistical information to the Iframe through cross domain messaging.” The client embedded code may pass the style component statistical information through cross domain messaging to an Iframe embedded on the client web page, for example client embedded code 102 may pass style component statistical information from client web page 101 to Iframe 103, as described in
Block 306 recites “receiving the style component statistical information at the Iframe and dynamically visually rendering, at the Iframe, at least one design options based on at least some aspects of the style component statistical information.” The multiple design options may be presented by way of a settings window, such as settings window 104 or parent settings window 204 as described with respect to
Block 307 recites “choosing and saving a design option from at least one design option.” The client may choose and save, at the Iframe, one of the visually rendered design options from at least one design option presented. Alternatively, the Iframe may automatically choose and save the design option from the multiple design options in response to the client embedding the Iframe, such as Iframe 103 or Iframes 203(1-N), as described with respect to
While various aspects and examples have been disclosed herein, other aspects and examples will be apparent to those skilled in the art. The various aspects and examples disclosed herein are for purposes of illustration and are not intended to be limiting, with the true scope and spirit being indicated by the following claims.
Number | Name | Date | Kind |
---|---|---|---|
7640512 | Appling | Dec 2009 | B1 |
8583738 | Zuckerberg et al. | Nov 2013 | B2 |
20020138588 | Leeds | Sep 2002 | A1 |
20030023445 | Trifon | Jan 2003 | A1 |
20050050454 | Jennery | Mar 2005 | A1 |
20060031404 | Kassab | Feb 2006 | A1 |
20070136320 | Sah et al. | Jun 2007 | A1 |
20070299857 | Gwozdz et al. | Dec 2007 | A1 |
20080055314 | Ziemski | Mar 2008 | A1 |
20080263566 | Buerge et al. | Oct 2008 | A1 |
20090037806 | Yang | Feb 2009 | A1 |
20090055460 | Hicks et al. | Feb 2009 | A1 |
20090276835 | Jackson et al. | Nov 2009 | A1 |
20090327421 | Fu et al. | Dec 2009 | A1 |
20090328063 | Corvera et al. | Dec 2009 | A1 |
20100077350 | Lim | Mar 2010 | A1 |
20100250653 | Hudgeons et al. | Sep 2010 | A1 |
20100251095 | Juvet et al. | Sep 2010 | A1 |
20120192063 | Koren et al. | Jul 2012 | A1 |
20140173414 | Chan et al. | Jun 2014 | A1 |
Number | Date | Country |
---|---|---|
2014014695 | Jan 2014 | WO |
Entry |
---|
“Embedding a document inside another using the <iframe> tag”, Javascriptkit, <http://www.javascriptkit.com/howto/externalhtml.shtml>, published prior to: Feb. 11, 2006. |
Wang Jiaye; “Improve cross-domain communication with client-side solutions”; Oct. 14, 2013; developerWorks; <http://www.ibm.com/developerworks/library/wa-crossdomaincomm/>. |
“Media Lab Develops Photoshop Plug-In for Facebook”, Wireless News, Published Mar. 17, 2011. |
Number | Date | Country | |
---|---|---|---|
20160117297 A1 | Apr 2016 | US |