Search code examples
javascriptcodepen

How to get HTML code from editable CodePen Embed Pen


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>

Solution

  • 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>