How to get HTML code from editable CodePen Embed Pen

user_5025024 0
Viewed 62

Is it possible to get the HTML from a editable CodePen Embed?

I tried to get the iFrame Content but it's restricted. Also no luck with postMessage.

Simple example for the embed pen:

<div 
  class="codepen" 
  data-prefill 
  data-height="400" 
  data-theme-id="1"
  data-default-tab="html,result"
  data-editable="true"  
>
<pre data-lang="html">
  &lt;div class="module"&gt;
    &lt;h3&gt;Module Title&lt;/h3&gt;
    &lt;p&gt;This little piggy went to market.&lt;/p&gt;
  &lt;/div&gt;
</pre>
</div>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
codepen javascript
1 Answers

The trick was to use window.parent.parent.postMessage().

<script>
window.addEventListener('message', function(event) {
  console.log(event.data); // the html
});
</script>

<div
        class="codepen"
        data-prefill
        data-height="400"
        data-theme-id="31205"
        data-editable="true"
        data-default-tab="html,result"
>
<pre data-lang="js">window.parent.parent.postMessage(document.body.children[0].outerHTML, '*');</pre>
<pre data-lang="html">
  &lt;div class="module"&gt;
    &lt;h3&gt;Module Title&lt;/h3&gt;
    &lt;p&gt;This little piggy went to market.&lt;/p&gt;
  &lt;/div&gt;
</pre>
</div>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
user_50250240
Related