iframes (filled by JS in my code) are not rendering. What should I know about how the lib handles them to solve my issue?

[juliendorra]

Use case:

I'm passing an element #container to dom-to-image-more that contains several iframe elements, populated programmatically using myIframe.contentDocument.open(), .write(), close() in another part of my code.

I am encountering several issues, and I'm unable to capture any of the iframe: they turn blank.

First issue: when cloning, the iframe are emptied. It is probably the browser that decide that there's a content policy or cross origin issue.

I was unable to find the right policy settings to avoid the iframe cloned being empty, so my fallback was to copy the content of the iframe document into the clone in the adjustClonedNode callback.

I have to use clonedIframe.srcdoc to populate the cloned iframe with html, as, and it's another issue, clonedIframe.contentDocument is not available / existing (maybe the browser is blocking access?)

By logging the cloned full node in the onclone callback, I was able to ensure that the iframe was indeed visible (opening the logged cloned HTML in the same browser where the capture fail for confirmation)

But even with the iframe content now confirmed to be in the clone, the capture doesn't display them.

I have tried to set fixed width and height, and many combination of sandbox and content policies. as I read that it could be an issue too. No luck.

What should I know about iframe rendering by dom-to-image-more that could help me pinpoint the issue? What are the settings that worked for you?

Thanks!

Expected behavior

Render the iframe content

Actual behavior (stack traces, console logs etc)

Impossible to get the iframe content to render

Library version

dom-to-image-more@3.4.3

Browsers

• Chrome 28.0.6613.114 (latest)
• Safari 17.4.1

[matthiaszach]

I know it's an old issue but I just encountered this issue myself. When trying to save/render the content of an iFrame that was populated programmatically from the parent window all images turned out black.
From what I found out the issue seems with how instanceof in JavaScript actually works. (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/instanceof#instanceof_and_multiple_realms)

The librabry uses instanceof to check if a node is for example an Element

function isElement(value) {
   return value instanceof getWindow(value).Element;
}

dom-to-image-more/src/dom-to-image-more.js

Line 675 in 7236e16

function isElement(value) {

But if value is a node generated not in the same window that it currently resides in (checked by the getWindow() function) it will return false even if it is actually an Element. But it is only an Element of the window it was generated in (in my case the main window or parent of the iframe)

Not sure if there is currently a way around that without forking the code, if so I would be happy to know.

I worked around the issue by checking if the value is instanceof getWindow(value).Element OR getWindow(value).parent.Element

but since this check is performed for multiple node types I extracted it into it's own method and used that for everything.
I also introduced a new option usesuIframe to only do this additional check when I actually need it because I have an iFrame

function isInstanceOf(value, type) {
   const window = getWindow(value);
   if (domtoimage.impl.options.usesIframe) {
      return value instanceof window[type] || value instanceof window.parent[type];
   }
   return value instanceof window[type];
}

.
.
.

function isElement(value) {
   return isInstanceOf(value, 'Element');
}

function isHTMLCanvasElement(value) {
   return isInstanceOf(value, 'HTMLCanvasElement');
}
.
.
.

I hope this helps someone, or if someone has a better solution I am happy to hear it.