-
Notifications
You must be signed in to change notification settings - Fork 3.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Friendly iframe embed system * getFrameElement refactored to include parent tests
- Loading branch information
Showing
20 changed files
with
1,038 additions
and
26 deletions.
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) { | ||
| 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.