Embed content in Anki using <iframe>

Anki Help
1

Hello!

I have a problem with embedding a website using iframe in a card.

Issue: :joy: The content just shows up for 1 second and then disapear.

This :point_right: GIF shows the issue.

<iframe src="https://v2.docusaurus.io" width="100%" height="500px"></iframe>

I’ve replaced v2.docsaurus.io to 🔗 in all places because new users can’t use more than two urls in their post.

console error message:

1be78505.308bb7a7.js:2 DOMException: Failed to read the ‘localStorage’ property from ‘Window’: Access is denied for this document.
at :link:/1be78505.308bb7a7.js:2:15634
at al (:link:/main.b0f93f70.js:2:193730)
at gs (:link:/main.b0f93f70.js:2:212809)
at t.unstable_runWithPriority (:link:/main.b0f93f70.js:2:231085)
at qa (:link:/main.b0f93f70.js:2:155545)
at ms (:link:/main.b0f93f70.js:2:212568)
at Jl (:link:/main.b0f93f70.js:2:204117)
at :link:/main.b0f93f70.js:2:155836
at t.unstable_runWithPriority (:link:/main.b0f93f70.js:2:231085)
at qa (:link:/main.b0f93f70.js:2:155545)
(anonymous) @ 1be78505.308bb7a7.js:2
1be78505.308bb7a7.js:2 DOMException: Failed to read the ‘localStorage’ property from ‘Window’: Access is denied for this document.
at :link:/1be78505.308bb7a7.js:2:14924
at al (:link:/main.b0f93f70.js:2:193730)
at gs (:link:/main.b0f93f70.js:2:212809)
at t.unstable_runWithPriority (:link:/main.b0f93f70.js:2:231085)
at qa (:link:/main.b0f93f70.js:2:155545)
at ms (:link:/main.b0f93f70.js:2:212568)
at Jl (:link:/main.b0f93f70.js:2:204117)
at :link:/main.b0f93f70.js:2:155836
at t.unstable_runWithPriority (:link:/main.b0f93f70.js:2:231085)
at qa (:link:/main.b0f93f70.js:2:155545)
(anonymous) @ 1be78505.308bb7a7.js:2
main.b0f93f70.js:2 DOMException: Failed to read the ‘localStorage’ property from ‘Window’: Access is denied for this document.
at :link:/1be78505.308bb7a7.js:2:16217
at al (:link:/main.b0f93f70.js:2:193730)
at gs (:link:/main.b0f93f70.js:2:212809)
at t.unstable_runWithPriority (:link:/main.b0f93f70.js:2:231085)
at qa (:link:/main.b0f93f70.js:2:155545)
at ms (:link:/main.b0f93f70.js:2:212568)
at Jl (:link:/main.b0f93f70.js:2:204117)
at :link:/main.b0f93f70.js:2:155836
at t.unstable_runWithPriority (:link:/main.b0f93f70.js:2:231085)
at qa (:link:/main.b0f93f70.js:2:155545)
el @ main.b0f93f70.js:2
1be78505.308bb7a7.js:2 Uncaught (in promise) DOMException: Failed to read the ‘localStorage’ property from ‘Window’: Access is denied for this document.
at :link:/1be78505.308bb7a7.js:2:16217
at al (:link:/main.b0f93f70.js:2:193730)
at gs (:link:/main.b0f93f70.js:2:212809)
at t.unstable_runWithPriority (:link:/main.b0f93f70.js:2:231085)
at qa (:link:/main.b0f93f70.js:2:155545)
at ms (:link:/main.b0f93f70.js:2:212568)
at Jl (:link:/main.b0f93f70.js:2:204117)
at :link:/main.b0f93f70.js:2:155836
at t.unstable_runWithPriority (:link:/main.b0f93f70.js:2:231085)
at qa (:link:/main.b0f93f70.js:2:155545)

Since I’m not quite familiar with JS, Please give me a pointer so I can fix this issue.

Thanks

2

You need to set the appropriate attributes. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

Try setting sandbox="allow-same-origin"

2 Likes
3

Thank you very much.

With this attribute, the content do :white_check_mark: show up again. However, It results two new issues.

:x: 1. All buttons on the embedded site don’t work anymore.

:x: 2. very low contrast between background and text in night mode. (:point_right: GIF)

:point_right: Live demo on Codepen

4

I recommend just putting a normal link to the page and opening it in the browser instead of embedding it.