如何從可編輯的CodePen Embed Pen中獲取HTML代碼

Question

是否可以從可編輯的 CodePen Embed 中獲取 HTML？

我試圖獲取 iFrame 內容，但它受到限制。 postMessage 也不走運。

嵌入筆的簡單示例：

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

Answer 1

訣竅是使用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>