0

I want to embed an interactive diagram in my Readymag page via iframe, but the diagram won't show up. I performed a test in JSFiddle: https://jsfiddle.net/TheFelipeGarcia/2p3aguck/, and it works there.

First, I exported my infographic as HTML + JavaScript from Adobe Animate. Then, I used Readymag's Widget Code to add the code to my page. A side note: originally the HTML had a link to the JS file

<script src="infographic.js?1578942235513"></script>

but I pasted the JS inline (it's very long so I won't repaste here).

Does anyone have experience with Readymag or a similar issue of embedding iframes, that might have ideas what I could be doing wrong?

Felipe Garcia
  • 1
  • 1
  • As per [help.readymag](https://help.readymag.com/hc/en-us/articles/360020527012-Embed-Code) have you tried the following: `**Use iFrame** Custom code may not display correctly in the Editor. Switch to Preview (P) mode on any plan to see if the embedded code works. If your custom code doesn’t appear even in preview, toggle the Use iFrame switch to enclose your injection in an tag.` – EGC Jan 13 '20 at 21:57
  • Thanks, EGC! I switched to preview mode, and toggled the 'Use iFrame' switch, but my diagram is still not showing up. – Felipe Garcia Jan 13 '20 at 22:09
  • Hit `F12`, have you got any console errors? – EGC Jan 13 '20 at 22:14
  • I'm not fluent in JavaScript, so I must apologize. These are the errors I see: 1. Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://my.readymag.com') does not match the recipient window's origin ('https://readymag.com'). 2. GET https://readymag.com/api/readymag/u91353366/1698168 403 – Felipe Garcia Jan 13 '20 at 22:30
  • Could you supply the code you're using for the iframe? And any relevant code you use to load it in? I couldn't see this in your JSFiddle – EGC Jan 13 '20 at 23:16
  • Certainly! This is the code used for the iframe, and to load it: `
    `     – Felipe Garcia Jan 13 '20 at 23:34
  • Hm, is that code that was generated? I'm just not exactly seeing how the source for the iframe is set from that. Generally it's of the format ``. Are you setting the `src` implicitly in JS somewhere? – EGC Jan 13 '20 at 23:36
  • Yes, that code was generated by Readymag. I'm not setting the source with JS, but I guess Readymag might be. – Felipe Garcia Jan 13 '20 at 23:51
  • So there could be 2 things at play here - `iframes` do not play well `cross-origin`, read more here: [Iframe Origin Policy](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy#Changing_origin). You could try to fix this issue by including this code in your head: ``. Originally sourced from here: [Access-Control-Allow-Origin not working for iframe withing the same domain](https://stackoverflow.com/questions/23362842/access-control-allow-origin-not-working-for-iframe-withing-the-same-domain) – EGC Jan 14 '20 at 00:04
  • Alternatively, you'll have to look at the JS code with the inspector tool on your website & try to await the `iframe` `src` to load - as there may be some issue with something not loading then being called, read more here: [Wait for iframe to load in JavaScript](https://stackoverflow.com/questions/1463581/wait-for-iframe-to-load-in-javascript) – EGC Jan 14 '20 at 00:04

0 Answers0