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

[email protected]

Browsers

• Chrome 28.0.6613.114 (latest)
• Safari 17.4.1