691 lines
26 KiB
JavaScript
691 lines
26 KiB
JavaScript
/* @flow */
|
|
'use strict';
|
|
import type {Bounds} from './Bounds';
|
|
import type {Options} from './index';
|
|
import type {PseudoContentData, PseudoContentItem} from './PseudoNodeContent';
|
|
import type Logger from './Logger';
|
|
|
|
import {parseBounds} from './Bounds';
|
|
import {Proxy} from './Proxy';
|
|
import ResourceLoader from './ResourceLoader';
|
|
import {copyCSSStyles} from './Util';
|
|
import {parseBackgroundImage} from './parsing/background';
|
|
import CanvasRenderer from './renderer/CanvasRenderer';
|
|
import {
|
|
parseCounterReset,
|
|
popCounters,
|
|
resolvePseudoContent,
|
|
PSEUDO_CONTENT_ITEM_TYPE
|
|
} from './PseudoNodeContent';
|
|
|
|
const IGNORE_ATTRIBUTE = 'data-html2canvas-ignore';
|
|
|
|
export class DocumentCloner {
|
|
scrolledElements: Array<[HTMLElement, number, number]>;
|
|
referenceElement: HTMLElement;
|
|
clonedReferenceElement: HTMLElement;
|
|
documentElement: HTMLElement;
|
|
resourceLoader: ResourceLoader;
|
|
logger: Logger;
|
|
options: Options;
|
|
inlineImages: boolean;
|
|
copyStyles: boolean;
|
|
renderer: (element: HTMLElement, options: Options, logger: Logger) => Promise<*>;
|
|
pseudoContentData: PseudoContentData;
|
|
|
|
constructor(
|
|
element: HTMLElement,
|
|
options: Options,
|
|
logger: Logger,
|
|
copyInline: boolean,
|
|
renderer: (element: HTMLElement, options: Options, logger: Logger) => Promise<*>
|
|
) {
|
|
this.referenceElement = element;
|
|
this.scrolledElements = [];
|
|
this.copyStyles = copyInline;
|
|
this.inlineImages = copyInline;
|
|
this.logger = logger;
|
|
this.options = options;
|
|
this.renderer = renderer;
|
|
this.resourceLoader = new ResourceLoader(options, logger, window);
|
|
this.pseudoContentData = {
|
|
counters: {},
|
|
quoteDepth: 0
|
|
};
|
|
// $FlowFixMe
|
|
this.documentElement = this.cloneNode(element.ownerDocument.documentElement);
|
|
}
|
|
|
|
inlineAllImages(node: ?HTMLElement) {
|
|
if (this.inlineImages && node) {
|
|
const style = node.style;
|
|
Promise.all(
|
|
parseBackgroundImage(style.backgroundImage).map(backgroundImage => {
|
|
if (backgroundImage.method === 'url') {
|
|
return this.resourceLoader
|
|
.inlineImage(backgroundImage.args[0])
|
|
.then(
|
|
img =>
|
|
img && typeof img.src === 'string'
|
|
? `url("${img.src}")`
|
|
: 'none'
|
|
)
|
|
.catch(e => {
|
|
if (__DEV__) {
|
|
this.logger.log(`Unable to load image`, e);
|
|
}
|
|
});
|
|
}
|
|
return Promise.resolve(
|
|
`${backgroundImage.prefix}${backgroundImage.method}(${backgroundImage.args.join(
|
|
','
|
|
)})`
|
|
);
|
|
})
|
|
).then(backgroundImages => {
|
|
if (backgroundImages.length > 1) {
|
|
// TODO Multiple backgrounds somehow broken in Chrome
|
|
style.backgroundColor = '';
|
|
}
|
|
style.backgroundImage = backgroundImages.join(',');
|
|
});
|
|
|
|
if (node instanceof HTMLImageElement) {
|
|
this.resourceLoader
|
|
.inlineImage(node.src)
|
|
.then(img => {
|
|
if (img && node instanceof HTMLImageElement && node.parentNode) {
|
|
const parentNode = node.parentNode;
|
|
const clonedChild = copyCSSStyles(node.style, img.cloneNode(false));
|
|
parentNode.replaceChild(clonedChild, node);
|
|
}
|
|
})
|
|
.catch(e => {
|
|
if (__DEV__) {
|
|
this.logger.log(`Unable to load image`, e);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
inlineFonts(document: Document): Promise<void> {
|
|
return Promise.all(
|
|
Array.from(document.styleSheets).map(sheet => {
|
|
if (sheet.href) {
|
|
return fetch(sheet.href)
|
|
.then(res => res.text())
|
|
.then(text => createStyleSheetFontsFromText(text, sheet.href))
|
|
.catch(e => {
|
|
if (__DEV__) {
|
|
this.logger.log(`Unable to load stylesheet`, e);
|
|
}
|
|
return [];
|
|
});
|
|
}
|
|
return getSheetFonts(sheet, document);
|
|
})
|
|
)
|
|
.then(fonts => fonts.reduce((acc, font) => acc.concat(font), []))
|
|
.then(fonts =>
|
|
Promise.all(
|
|
fonts.map(font =>
|
|
fetch(font.formats[0].src)
|
|
.then(response => response.blob())
|
|
.then(
|
|
blob =>
|
|
new Promise((resolve, reject) => {
|
|
const reader = new FileReader();
|
|
reader.onerror = reject;
|
|
reader.onload = () => {
|
|
// $FlowFixMe
|
|
const result: string = reader.result;
|
|
resolve(result);
|
|
};
|
|
reader.readAsDataURL(blob);
|
|
})
|
|
)
|
|
.then(dataUri => {
|
|
font.fontFace.setProperty('src', `url("${dataUri}")`);
|
|
return `@font-face {${font.fontFace.cssText} `;
|
|
})
|
|
)
|
|
)
|
|
)
|
|
.then(fontCss => {
|
|
const style = document.createElement('style');
|
|
style.textContent = fontCss.join('\n');
|
|
this.documentElement.appendChild(style);
|
|
});
|
|
}
|
|
|
|
createElementClone(node: Node) {
|
|
if (this.copyStyles && node instanceof HTMLCanvasElement) {
|
|
const img = node.ownerDocument.createElement('img');
|
|
try {
|
|
img.src = node.toDataURL();
|
|
return img;
|
|
} catch (e) {
|
|
if (__DEV__) {
|
|
this.logger.log(`Unable to clone canvas contents, canvas is tainted`);
|
|
}
|
|
}
|
|
}
|
|
|
|
if (node instanceof HTMLIFrameElement) {
|
|
const tempIframe = node.cloneNode(false);
|
|
const iframeKey = generateIframeKey();
|
|
tempIframe.setAttribute('data-html2canvas-internal-iframe-key', iframeKey);
|
|
|
|
const {width, height} = parseBounds(node, 0, 0);
|
|
|
|
this.resourceLoader.cache[iframeKey] = getIframeDocumentElement(node, this.options)
|
|
.then(documentElement => {
|
|
return this.renderer(
|
|
documentElement,
|
|
{
|
|
allowTaint: this.options.allowTaint,
|
|
backgroundColor: '#ffffff',
|
|
canvas: null,
|
|
imageTimeout: this.options.imageTimeout,
|
|
logging: this.options.logging,
|
|
proxy: this.options.proxy,
|
|
removeContainer: this.options.removeContainer,
|
|
scale: this.options.scale,
|
|
foreignObjectRendering: this.options.foreignObjectRendering,
|
|
useCORS: this.options.useCORS,
|
|
target: new CanvasRenderer(),
|
|
width,
|
|
height,
|
|
x: 0,
|
|
y: 0,
|
|
windowWidth: documentElement.ownerDocument.defaultView.innerWidth,
|
|
windowHeight: documentElement.ownerDocument.defaultView.innerHeight,
|
|
scrollX: documentElement.ownerDocument.defaultView.pageXOffset,
|
|
scrollY: documentElement.ownerDocument.defaultView.pageYOffset
|
|
},
|
|
this.logger.child(iframeKey)
|
|
);
|
|
})
|
|
.then(
|
|
canvas =>
|
|
new Promise((resolve, reject) => {
|
|
const iframeCanvas = document.createElement('img');
|
|
iframeCanvas.onload = () => resolve(canvas);
|
|
iframeCanvas.onerror = function(event) {
|
|
// Empty iframes may result in empty "data:," URLs, which are invalid from the <img>'s point of view
|
|
// and instead of `onload` cause `onerror` and unhandled rejection warnings
|
|
// https://github.com/niklasvh/html2canvas/issues/1502
|
|
iframeCanvas.src == 'data:,' ? resolve(canvas) : reject(event);
|
|
};
|
|
iframeCanvas.src = canvas.toDataURL();
|
|
if (tempIframe.parentNode) {
|
|
tempIframe.parentNode.replaceChild(
|
|
copyCSSStyles(
|
|
node.ownerDocument.defaultView.getComputedStyle(node),
|
|
iframeCanvas
|
|
),
|
|
tempIframe
|
|
);
|
|
}
|
|
})
|
|
);
|
|
return tempIframe;
|
|
}
|
|
|
|
try {
|
|
if (node instanceof HTMLStyleElement && node.sheet && node.sheet.cssRules) {
|
|
const css = [].slice.call(node.sheet.cssRules, 0).reduce((css, rule) => {
|
|
if (rule && rule.cssText) {
|
|
return css + rule.cssText;
|
|
}
|
|
return css;
|
|
}, '');
|
|
const style = node.cloneNode(false);
|
|
style.textContent = css;
|
|
return style;
|
|
}
|
|
} catch (e) {
|
|
// accessing node.sheet.cssRules throws a DOMException
|
|
this.logger.log('Unable to access cssRules property');
|
|
if (e.name !== 'SecurityError') {
|
|
this.logger.log(e);
|
|
throw e;
|
|
}
|
|
}
|
|
|
|
return node.cloneNode(false);
|
|
}
|
|
|
|
cloneNode(node: Node): Node {
|
|
const clone =
|
|
node.nodeType === Node.TEXT_NODE
|
|
? document.createTextNode(node.nodeValue)
|
|
: this.createElementClone(node);
|
|
|
|
const window = node.ownerDocument.defaultView;
|
|
const style = node instanceof window.HTMLElement ? window.getComputedStyle(node) : null;
|
|
const styleBefore =
|
|
node instanceof window.HTMLElement ? window.getComputedStyle(node, ':before') : null;
|
|
const styleAfter =
|
|
node instanceof window.HTMLElement ? window.getComputedStyle(node, ':after') : null;
|
|
|
|
if (this.referenceElement === node && clone instanceof window.HTMLElement) {
|
|
this.clonedReferenceElement = clone;
|
|
}
|
|
|
|
if (clone instanceof window.HTMLBodyElement) {
|
|
createPseudoHideStyles(clone);
|
|
}
|
|
|
|
const counters = parseCounterReset(style, this.pseudoContentData);
|
|
const contentBefore = resolvePseudoContent(node, styleBefore, this.pseudoContentData);
|
|
|
|
for (let child = node.firstChild; child; child = child.nextSibling) {
|
|
if (
|
|
child.nodeType !== Node.ELEMENT_NODE ||
|
|
(child.nodeName !== 'SCRIPT' &&
|
|
// $FlowFixMe
|
|
!child.hasAttribute(IGNORE_ATTRIBUTE) &&
|
|
(typeof this.options.ignoreElements !== 'function' ||
|
|
// $FlowFixMe
|
|
!this.options.ignoreElements(child)))
|
|
) {
|
|
if (!this.copyStyles || child.nodeName !== 'STYLE') {
|
|
clone.appendChild(this.cloneNode(child));
|
|
}
|
|
}
|
|
}
|
|
|
|
const contentAfter = resolvePseudoContent(node, styleAfter, this.pseudoContentData);
|
|
popCounters(counters, this.pseudoContentData);
|
|
|
|
if (node instanceof window.HTMLElement && clone instanceof window.HTMLElement) {
|
|
if (styleBefore) {
|
|
this.inlineAllImages(
|
|
inlinePseudoElement(node, clone, styleBefore, contentBefore, PSEUDO_BEFORE)
|
|
);
|
|
}
|
|
if (styleAfter) {
|
|
this.inlineAllImages(
|
|
inlinePseudoElement(node, clone, styleAfter, contentAfter, PSEUDO_AFTER)
|
|
);
|
|
}
|
|
if (style && this.copyStyles && !(node instanceof HTMLIFrameElement)) {
|
|
copyCSSStyles(style, clone);
|
|
}
|
|
this.inlineAllImages(clone);
|
|
if (node.scrollTop !== 0 || node.scrollLeft !== 0) {
|
|
this.scrolledElements.push([clone, node.scrollLeft, node.scrollTop]);
|
|
}
|
|
switch (node.nodeName) {
|
|
case 'CANVAS':
|
|
if (!this.copyStyles) {
|
|
cloneCanvasContents(node, clone);
|
|
}
|
|
break;
|
|
case 'TEXTAREA':
|
|
case 'SELECT':
|
|
clone.value = node.value;
|
|
break;
|
|
}
|
|
}
|
|
return clone;
|
|
}
|
|
}
|
|
|
|
type Font = {
|
|
src: string,
|
|
format: string
|
|
};
|
|
|
|
type FontFamily = {
|
|
formats: Array<Font>,
|
|
fontFace: CSSStyleDeclaration
|
|
};
|
|
|
|
const getSheetFonts = (sheet: StyleSheet, document: Document): Array<FontFamily> => {
|
|
// $FlowFixMe
|
|
return (sheet.cssRules ? Array.from(sheet.cssRules) : [])
|
|
.filter(rule => rule.type === CSSRule.FONT_FACE_RULE)
|
|
.map(rule => {
|
|
const src = parseBackgroundImage(rule.style.getPropertyValue('src'));
|
|
const formats = [];
|
|
for (let i = 0; i < src.length; i++) {
|
|
if (src[i].method === 'url' && src[i + 1] && src[i + 1].method === 'format') {
|
|
const a = document.createElement('a');
|
|
a.href = src[i].args[0];
|
|
if (document.body) {
|
|
document.body.appendChild(a);
|
|
}
|
|
|
|
const font = {
|
|
src: a.href,
|
|
format: src[i + 1].args[0]
|
|
};
|
|
formats.push(font);
|
|
}
|
|
}
|
|
|
|
return {
|
|
// TODO select correct format for browser),
|
|
|
|
formats: formats.filter(font => /^woff/i.test(font.format)),
|
|
fontFace: rule.style
|
|
};
|
|
})
|
|
.filter(font => font.formats.length);
|
|
};
|
|
|
|
const createStyleSheetFontsFromText = (text: string, baseHref: string): Array<FontFamily> => {
|
|
const doc = document.implementation.createHTMLDocument('');
|
|
const base = document.createElement('base');
|
|
// $FlowFixMe
|
|
base.href = baseHref;
|
|
const style = document.createElement('style');
|
|
|
|
style.textContent = text;
|
|
if (doc.head) {
|
|
doc.head.appendChild(base);
|
|
}
|
|
if (doc.body) {
|
|
doc.body.appendChild(style);
|
|
}
|
|
|
|
return style.sheet ? getSheetFonts(style.sheet, doc) : [];
|
|
};
|
|
|
|
const restoreOwnerScroll = (ownerDocument: Document, x: number, y: number) => {
|
|
if (
|
|
ownerDocument.defaultView &&
|
|
(x !== ownerDocument.defaultView.pageXOffset || y !== ownerDocument.defaultView.pageYOffset)
|
|
) {
|
|
ownerDocument.defaultView.scrollTo(x, y);
|
|
}
|
|
};
|
|
|
|
const cloneCanvasContents = (canvas: HTMLCanvasElement, clonedCanvas: HTMLCanvasElement) => {
|
|
try {
|
|
if (clonedCanvas) {
|
|
clonedCanvas.width = canvas.width;
|
|
clonedCanvas.height = canvas.height;
|
|
const ctx = canvas.getContext('2d');
|
|
const clonedCtx = clonedCanvas.getContext('2d');
|
|
if (ctx) {
|
|
clonedCtx.putImageData(ctx.getImageData(0, 0, canvas.width, canvas.height), 0, 0);
|
|
} else {
|
|
clonedCtx.drawImage(canvas, 0, 0);
|
|
}
|
|
}
|
|
} catch (e) {}
|
|
};
|
|
|
|
const inlinePseudoElement = (
|
|
node: HTMLElement,
|
|
clone: HTMLElement,
|
|
style: CSSStyleDeclaration,
|
|
contentItems: ?Array<PseudoContentItem>,
|
|
pseudoElt: ':before' | ':after'
|
|
): ?HTMLElement => {
|
|
if (
|
|
!style ||
|
|
!style.content ||
|
|
style.content === 'none' ||
|
|
style.content === '-moz-alt-content' ||
|
|
style.display === 'none'
|
|
) {
|
|
return;
|
|
}
|
|
|
|
const anonymousReplacedElement = clone.ownerDocument.createElement('html2canvaspseudoelement');
|
|
copyCSSStyles(style, anonymousReplacedElement);
|
|
|
|
if (contentItems) {
|
|
const len = contentItems.length;
|
|
for (var i = 0; i < len; i++) {
|
|
const item = contentItems[i];
|
|
switch (item.type) {
|
|
case PSEUDO_CONTENT_ITEM_TYPE.IMAGE:
|
|
const img = clone.ownerDocument.createElement('img');
|
|
img.src = parseBackgroundImage(`url(${item.value})`)[0].args[0];
|
|
img.style.opacity = '1';
|
|
anonymousReplacedElement.appendChild(img);
|
|
break;
|
|
case PSEUDO_CONTENT_ITEM_TYPE.TEXT:
|
|
anonymousReplacedElement.appendChild(
|
|
clone.ownerDocument.createTextNode(item.value)
|
|
);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
anonymousReplacedElement.className = `${PSEUDO_HIDE_ELEMENT_CLASS_BEFORE} ${PSEUDO_HIDE_ELEMENT_CLASS_AFTER}`;
|
|
clone.className +=
|
|
pseudoElt === PSEUDO_BEFORE
|
|
? ` ${PSEUDO_HIDE_ELEMENT_CLASS_BEFORE}`
|
|
: ` ${PSEUDO_HIDE_ELEMENT_CLASS_AFTER}`;
|
|
if (pseudoElt === PSEUDO_BEFORE) {
|
|
clone.insertBefore(anonymousReplacedElement, clone.firstChild);
|
|
} else {
|
|
clone.appendChild(anonymousReplacedElement);
|
|
}
|
|
|
|
return anonymousReplacedElement;
|
|
};
|
|
|
|
const URL_REGEXP = /^url\((.+)\)$/i;
|
|
const PSEUDO_BEFORE = ':before';
|
|
const PSEUDO_AFTER = ':after';
|
|
const PSEUDO_HIDE_ELEMENT_CLASS_BEFORE = '___html2canvas___pseudoelement_before';
|
|
const PSEUDO_HIDE_ELEMENT_CLASS_AFTER = '___html2canvas___pseudoelement_after';
|
|
|
|
const PSEUDO_HIDE_ELEMENT_STYLE = `{
|
|
content: "" !important;
|
|
display: none !important;
|
|
}`;
|
|
|
|
const createPseudoHideStyles = (body: HTMLElement) => {
|
|
createStyles(
|
|
body,
|
|
`.${PSEUDO_HIDE_ELEMENT_CLASS_BEFORE}${PSEUDO_BEFORE}${PSEUDO_HIDE_ELEMENT_STYLE}
|
|
.${PSEUDO_HIDE_ELEMENT_CLASS_AFTER}${PSEUDO_AFTER}${PSEUDO_HIDE_ELEMENT_STYLE}`
|
|
);
|
|
};
|
|
|
|
const createStyles = (body: HTMLElement, styles) => {
|
|
const style = body.ownerDocument.createElement('style');
|
|
style.innerHTML = styles;
|
|
body.appendChild(style);
|
|
};
|
|
|
|
const initNode = ([element, x, y]: [HTMLElement, number, number]) => {
|
|
element.scrollLeft = x;
|
|
element.scrollTop = y;
|
|
};
|
|
|
|
const generateIframeKey = (): string =>
|
|
Math.ceil(Date.now() + Math.random() * 10000000).toString(16);
|
|
|
|
const DATA_URI_REGEXP = /^data:text\/(.+);(base64)?,(.*)$/i;
|
|
|
|
const getIframeDocumentElement = (
|
|
node: HTMLIFrameElement,
|
|
options: Options
|
|
): Promise<HTMLElement> => {
|
|
try {
|
|
return Promise.resolve(node.contentWindow.document.documentElement);
|
|
} catch (e) {
|
|
return options.proxy
|
|
? Proxy(node.src, options)
|
|
.then(html => {
|
|
const match = html.match(DATA_URI_REGEXP);
|
|
if (!match) {
|
|
return Promise.reject();
|
|
}
|
|
|
|
return match[2] === 'base64'
|
|
? window.atob(decodeURIComponent(match[3]))
|
|
: decodeURIComponent(match[3]);
|
|
})
|
|
.then(html =>
|
|
createIframeContainer(
|
|
node.ownerDocument,
|
|
parseBounds(node, 0, 0)
|
|
).then(cloneIframeContainer => {
|
|
const cloneWindow = cloneIframeContainer.contentWindow;
|
|
const documentClone = cloneWindow.document;
|
|
|
|
documentClone.open();
|
|
documentClone.write(html);
|
|
const iframeLoad = iframeLoader(cloneIframeContainer).then(
|
|
() => documentClone.documentElement
|
|
);
|
|
|
|
documentClone.close();
|
|
return iframeLoad;
|
|
})
|
|
)
|
|
: Promise.reject();
|
|
}
|
|
};
|
|
|
|
const createIframeContainer = (
|
|
ownerDocument: Document,
|
|
bounds: Bounds
|
|
): Promise<HTMLIFrameElement> => {
|
|
const cloneIframeContainer = ownerDocument.createElement('iframe');
|
|
|
|
cloneIframeContainer.className = 'html2canvas-container';
|
|
cloneIframeContainer.style.visibility = 'hidden';
|
|
cloneIframeContainer.style.position = 'fixed';
|
|
cloneIframeContainer.style.left = '-10000px';
|
|
cloneIframeContainer.style.top = '0px';
|
|
cloneIframeContainer.style.border = '0';
|
|
cloneIframeContainer.width = bounds.width.toString();
|
|
cloneIframeContainer.height = bounds.height.toString();
|
|
cloneIframeContainer.scrolling = 'no'; // ios won't scroll without it
|
|
cloneIframeContainer.setAttribute(IGNORE_ATTRIBUTE, 'true');
|
|
if (!ownerDocument.body) {
|
|
return Promise.reject(
|
|
__DEV__ ? `Body element not found in Document that is getting rendered` : ''
|
|
);
|
|
}
|
|
|
|
ownerDocument.body.appendChild(cloneIframeContainer);
|
|
|
|
return Promise.resolve(cloneIframeContainer);
|
|
};
|
|
|
|
const iframeLoader = (cloneIframeContainer: HTMLIFrameElement): Promise<HTMLIFrameElement> => {
|
|
const cloneWindow = cloneIframeContainer.contentWindow;
|
|
const documentClone = cloneWindow.document;
|
|
|
|
return new Promise((resolve, reject) => {
|
|
cloneWindow.onload = cloneIframeContainer.onload = documentClone.onreadystatechange = () => {
|
|
const interval = setInterval(() => {
|
|
if (
|
|
documentClone.body.childNodes.length > 0 &&
|
|
documentClone.readyState === 'complete'
|
|
) {
|
|
clearInterval(interval);
|
|
resolve(cloneIframeContainer);
|
|
}
|
|
}, 50);
|
|
};
|
|
});
|
|
};
|
|
|
|
export const cloneWindow = (
|
|
ownerDocument: Document,
|
|
bounds: Bounds,
|
|
referenceElement: HTMLElement,
|
|
options: Options,
|
|
logger: Logger,
|
|
renderer: (element: HTMLElement, options: Options, logger: Logger) => Promise<*>
|
|
): Promise<[HTMLIFrameElement, HTMLElement, ResourceLoader]> => {
|
|
const cloner = new DocumentCloner(referenceElement, options, logger, false, renderer);
|
|
const scrollX = ownerDocument.defaultView.pageXOffset;
|
|
const scrollY = ownerDocument.defaultView.pageYOffset;
|
|
|
|
return createIframeContainer(ownerDocument, bounds).then(cloneIframeContainer => {
|
|
const cloneWindow = cloneIframeContainer.contentWindow;
|
|
const documentClone = cloneWindow.document;
|
|
|
|
/* Chrome doesn't detect relative background-images assigned in inline <style> sheets when fetched through getComputedStyle
|
|
if window url is about:blank, we can assign the url to current by writing onto the document
|
|
*/
|
|
|
|
const iframeLoad = iframeLoader(cloneIframeContainer).then(() => {
|
|
cloner.scrolledElements.forEach(initNode);
|
|
cloneWindow.scrollTo(bounds.left, bounds.top);
|
|
if (
|
|
/(iPad|iPhone|iPod)/g.test(navigator.userAgent) &&
|
|
(cloneWindow.scrollY !== bounds.top || cloneWindow.scrollX !== bounds.left)
|
|
) {
|
|
documentClone.documentElement.style.top = -bounds.top + 'px';
|
|
documentClone.documentElement.style.left = -bounds.left + 'px';
|
|
documentClone.documentElement.style.position = 'absolute';
|
|
}
|
|
|
|
const result = Promise.resolve([
|
|
cloneIframeContainer,
|
|
cloner.clonedReferenceElement,
|
|
cloner.resourceLoader
|
|
]);
|
|
|
|
const onclone = options.onclone;
|
|
|
|
return cloner.clonedReferenceElement instanceof cloneWindow.HTMLElement ||
|
|
cloner.clonedReferenceElement instanceof ownerDocument.defaultView.HTMLElement ||
|
|
cloner.clonedReferenceElement instanceof HTMLElement
|
|
? typeof onclone === 'function'
|
|
? Promise.resolve().then(() => onclone(documentClone)).then(() => result)
|
|
: result
|
|
: Promise.reject(
|
|
__DEV__
|
|
? `Error finding the ${referenceElement.nodeName} in the cloned document`
|
|
: ''
|
|
);
|
|
});
|
|
|
|
documentClone.open();
|
|
documentClone.write(`${serializeDoctype(document.doctype)}<html></html>`);
|
|
// Chrome scrolls the parent document for some reason after the write to the cloned window???
|
|
restoreOwnerScroll(referenceElement.ownerDocument, scrollX, scrollY);
|
|
documentClone.replaceChild(
|
|
documentClone.adoptNode(cloner.documentElement),
|
|
documentClone.documentElement
|
|
);
|
|
documentClone.close();
|
|
|
|
return iframeLoad;
|
|
});
|
|
};
|
|
|
|
const serializeDoctype = (doctype: ?DocumentType): string => {
|
|
let str = '';
|
|
if (doctype) {
|
|
str += '<!DOCTYPE ';
|
|
if (doctype.name) {
|
|
str += doctype.name;
|
|
}
|
|
|
|
if (doctype.internalSubset) {
|
|
str += doctype.internalSubset;
|
|
}
|
|
|
|
if (doctype.publicId) {
|
|
str += `"${doctype.publicId}"`;
|
|
}
|
|
|
|
if (doctype.systemId) {
|
|
str += `"${doctype.systemId}"`;
|
|
}
|
|
|
|
str += '>';
|
|
}
|
|
|
|
return str;
|
|
};
|