Friendly frames embeds #4916
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,223 @@ | ||
| /** | ||
| * Copyright 2016 The AMP HTML Authors. All Rights Reserved. | ||
| * | ||
| * Licensed under the Apache License, Version 2.0 (the "License"); | ||
| * you may not use this file except in compliance with the License. | ||
| * You may obtain a copy of the License at | ||
| * | ||
| * http://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, software | ||
| * distributed under the License is distributed on an "AS-IS" BASIS, | ||
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| * See the License for the specific language governing permissions and | ||
| * limitations under the License. | ||
| */ | ||
|
|
||
| import {escapeHtml} from './dom'; | ||
| import {extensionsFor} from './extensions'; | ||
| import {getTopWindow} from './service'; | ||
| import {loadPromise} from './event-helper'; | ||
| import {resourcesForDoc} from './resources'; | ||
|
|
||
|
|
||
| /** | ||
| * Parameters used to create the new "friendly iframe" embed. | ||
| * - html: The complete content of an AMP embed, which is itself an AMP | ||
| * document. Can include whatever is normally allowed in an AMP document, | ||
| * except for AMP `<script>` declarations. Those should be passed as an | ||
| * array of `extensionIds`. | ||
| * - extensionsIds: An optional array of AMP extension IDs used in this embed. | ||
| * - fonts: An optional array of fonts used in this embed. | ||
| * | ||
| * @typedef {{ | ||
| * url: string, | ||
| * html: string, | ||
| * extensionIds: (?Array<string>|undefined), | ||
| * fonts: (?Array<string>|undefined), | ||
| * }} | ||
| */ | ||
| export let FriendlyIframeSpec; | ||
|
|
||
|
|
||
| /** | ||
| * @type {boolean|undefined} | ||
| * @visiblefortesting | ||
| */ | ||
| let srcdocSupported; | ||
|
|
||
| /** | ||
| * @param {boolean|undefined} val | ||
| * @visiblefortesting | ||
| */ | ||
| export function setSrcdocSupportedForTesting(val) { | ||
| srcdocSupported = val; | ||
| } | ||
|
|
||
| /** | ||
| * Returns `true` if the Friendly Iframes are supported. | ||
| * @return {boolean} | ||
| */ | ||
| function isSrcdocSupported() { | ||
| if (srcdocSupported === undefined) { | ||
| srcdocSupported = 'srcdoc' in HTMLIFrameElement.prototype; | ||
| } | ||
| return srcdocSupported; | ||
| } | ||
|
|
||
|
|
||
| /** | ||
| * Creates the requested "friendly iframe" embed. Returns the promise that | ||
| * will be resolved as soon as the embed is available. The actual | ||
| * initialization of the embed will start as soon as the `iframe` is added | ||
| * to the DOM. | ||
| * @param {!HTMLIFrameElement} iframe | ||
| * @param {!Element} container | ||
| * @param {!FriendlyIframeSpec} spec | ||
| * @return {!Promise<FriendlyIframeEmbed>} | ||
| */ | ||
| export function installFriendlyIframeEmbed(iframe, container, spec) { | ||
| const win = getTopWindow(iframe.ownerDocument.defaultView); | ||
| const extensions = extensionsFor(win); | ||
|
|
||
| iframe.style.visibility = 'hidden'; | ||
| iframe.setAttribute('referrerpolicy', 'unsafe-url'); | ||
|
|
||
| // Pre-load extensions. | ||
| if (spec.extensionIds) { | ||
| spec.extensionIds.forEach( | ||
| extensionId => extensions.loadExtension(extensionId)); | ||
| } | ||
|
|
||
| const html = mergeHtml(spec); | ||
|
|
||
| // Receive the signal when iframe is ready: it's document is formed. | ||
| iframe.onload = () => { | ||
| // Chrome does not reflect the iframe readystate. | ||
| iframe.readyState = 'complete'; | ||
| }; | ||
| let readyPromise; | ||
| if (isSrcdocSupported()) { | ||
| iframe.srcdoc = html; | ||
| // TODO(dvoytenko): Look for a way to get a faster call from here. | ||
| // Experiments show that the iframe's "load" event is consistently 50-100ms | ||
| // later than the contentWindow actually available. | ||
| readyPromise = loadPromise(iframe); | ||
| container.appendChild(iframe); | ||
| } else { | ||
| iframe.src = 'about:blank'; | ||
| container.appendChild(iframe); | ||
| const childDoc = iframe.contentWindow.document; | ||
| childDoc.open(); | ||
| childDoc.write(html); | ||
| childDoc.close(); | ||
| // Window is created synchornously in this case. | ||
| readyPromise = Promise.resolve(); | ||
| } | ||
| return readyPromise.then(() => { | ||
| // Add extensions. | ||
| extensions.installExtensionsInChildWindow( | ||
| iframe.contentWindow, spec.extensionIds || []); | ||
| // Ready to be shown. | ||
| iframe.style.visibility = ''; | ||
| return new FriendlyIframeEmbed(iframe, spec); | ||
| }); | ||
| } | ||
|
|
||
|
|
||
| /** | ||
|
|
||
| * Merges base and fonts into html document. | ||
| * @param {!FriendlyIframeSpec} spec | ||
| */ | ||
| function mergeHtml(spec) { | ||
| const originalHtml = spec.html; | ||
| const originalHtmlUp = originalHtml.toUpperCase(); | ||
|
|
||
| // Find the insertion point. | ||
| let ip = originalHtmlUp.indexOf('<HEAD'); | ||
| if (ip != -1) { | ||
| ip = originalHtmlUp.indexOf('>', ip + 1) + 1; | ||
| } | ||
| if (ip == -1) { | ||
| ip = originalHtmlUp.indexOf('<BODY'); | ||
| } | ||
| if (ip == -1) { | ||
| ip = originalHtmlUp.indexOf('<HTML'); | ||
| if (ip != -1) { | ||
| ip = originalHtmlUp.indexOf('>', ip + 1) + 1; | ||
| } | ||
| } | ||
|
|
||
| const result = []; | ||
|
|
||
| // Preambule. | ||
| if (ip > 0) { | ||
| result.push(originalHtml.substring(0, ip)); | ||
| } | ||
|
|
||
| // Add <BASE> tag. | ||
| result.push(`<base href="${escapeHtml(spec.url)}">`); | ||
|
|
||
| // Load fonts. | ||
| if (spec.fonts) { | ||
| spec.fonts.forEach(font => { | ||
| result.push( | ||
| `<link href="${escapeHtml(font)}" rel="stylesheet" type="text/css">`); | ||
| }); | ||
| } | ||
|
|
||
| // Postambule. | ||
| if (ip > 0) { | ||
| result.push(originalHtml.substring(ip)); | ||
| } else { | ||
| result.push(originalHtml); | ||
| } | ||
|
|
||
| return result.join(''); | ||
| } | ||
|
|
||
|
|
||
| /** | ||
| * Exposes `mergeHtml` for testing purposes. | ||
| * @param {!FriendlyIframeSpec} spec | ||
| * @visibleForTesting | ||
| */ | ||
| export function mergeHtmlForTesting(spec) { | ||
|
There was a problem hiding this comment. Why not just expose the There was a problem hiding this comment.
|
||
| return mergeHtml(spec); | ||
| } | ||
|
|
||
|
|
||
| /** | ||
| * A "friendly iframe" embed. This is the iframe that's fully accessible to | ||
| * the AMP runtime. It's similar to Shadow DOM in many respects, but it also | ||
| * provides iframe/viewport measurements and enables the use of `vh`, `vw` and | ||
| * `@media` CSS. | ||
| * | ||
| * The friendly iframe is managed by the top-level AMP Runtime. When it's | ||
| * destroyed, the `destroy` method must be called to free up the shared | ||
| * resources. | ||
| */ | ||
| export class FriendlyIframeEmbed { | ||
|
|
||
| /** | ||
| * @param {!HTMLIFrameElement} iframe | ||
| * @param {!FriendlyIframeSpec} spec | ||
| */ | ||
| constructor(iframe, spec) { | ||
| /** @const {!HTMLIFrameElement} */ | ||
| this.iframe = iframe; | ||
|
|
||
| /** @const {!Window} */ | ||
| this.win = iframe.contentWindow; | ||
|
|
||
| /** @const {!FriendlyIframeSpec} */ | ||
| this.spec = spec; | ||
| } | ||
|
|
||
| /** | ||
| * Ensures that all resources from this iframe have been released. | ||
| */ | ||
| destroy() { | ||
| resourcesForDoc(this.iframe).removeForChildWindow(this.win); | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Document
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done