Allow changing the markup inside embedded IFRAME
michal-kocarek opened this issue · 4 comments
Summary 💡
Playground allows to be embedded inside an IFRAME in other page. However, once loaded, there is no simple way of changing the markup within the playground.
By looking at the code I thought might be not difficult to allow this by adding one more case into 'message' event handler, which would allow changing the content of the markup once the IFRAME has been loaded.
Examples 🌈
It would be great if I could call from parent page something like this:
document.querySelector('iframe.testing_playground_embed_iframe').contentWindow.postMessage({type: 'SET_MARKUP', markup: '<div>Updated content</div>'}, 'https://testing-playground.com')and as a result, the markup of the embedded IFRAME would update...
Motivation 🔦
I have a use case, where there is live HTML example that is updated in parent page and shall be accessible inside that playground. I would like to update the HTML markup while preserving the queries that user has been already writing in.
That sounds very interesting! This would allow us to build interactive playgrounds / tutorials.
Are you willing/able to take a look at it, and submit a PR? I would be happy to support this.
Sure, I will do PR for this. Thank you for quick reply.
Hi @smeijer, I've made some PR for this issue, and am looking forward for any feedback.
Have a great day.