简体   繁体   中英

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>

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>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM