fix: add <base> to fix relative error in iframe

This commit is contained in:
Frank Cheung 2022-09-25 13:13:31 +08:00
parent 6020386bbe
commit 41fb73e83e
2 changed files with 15 additions and 2 deletions

2
package-lock.json generated
View File

@ -5,7 +5,7 @@
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"version": "1.4.0", "version": "1.4.1",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"css-line-break": "^2.1.0", "css-line-break": "^2.1.0",

View File

@ -129,11 +129,17 @@ export class DocumentCloner {
return iframe; return iframe;
}); });
const adoptedNode = documentClone.adoptNode(this.documentElement);
/**
* The baseURI of the document will be lost after documentClone.open().
* We can avoid it by adding <base> element.
* */
addBase(adoptedNode, documentClone);
documentClone.open(); documentClone.open();
documentClone.write(`${serializeDoctype(document.doctype)}<html></html>`); documentClone.write(`${serializeDoctype(document.doctype)}<html></html>`);
// Chrome scrolls the parent document for some reason after the write to the cloned window??? // Chrome scrolls the parent document for some reason after the write to the cloned window???
restoreOwnerScroll(this.referenceElement.ownerDocument, scrollX, scrollY); restoreOwnerScroll(this.referenceElement.ownerDocument, scrollX, scrollY);
documentClone.replaceChild(documentClone.adoptNode(this.documentElement), documentClone.documentElement); documentClone.replaceChild(adoptedNode, documentClone.documentElement);
documentClone.close(); documentClone.close();
return iframeLoad; return iframeLoad;
@ -635,3 +641,10 @@ const createStyles = (body: HTMLElement, styles: string) => {
body.appendChild(style); body.appendChild(style);
} }
}; };
const addBase = (targetELement: HTMLElement, referenceDocument: Document) => {
const baseNode = referenceDocument.createElement('base');
baseNode.href = referenceDocument.baseURI;
const headEle = targetELement.getElementsByTagName('head').item(0);
headEle?.insertBefore(baseNode, headEle?.firstChild ?? null);
};