¿Es posible obtener el HTML de un CodePen Embed editable?
Intenté obtener el contenido de iFrame, pero está restringido. Tampoco hubo suerte con postMessage.
Ejemplo simple para la pluma incrustada:
<div class="codepen" data-prefill data-height="400" data-theme-id="1" data-default-tab="html,result" data-editable="true" > <pre data-lang="html"> <div class="module"> <h3>Module Title</h3> <p>This little piggy went to market.</p> </div> </pre> </div> <script async src="https://static.codepen.io/assets/embed/ei.js"></script>El truco fue usar 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"> <div class="module"> <h3>Module Title</h3> <p>This little piggy went to market.</p> </div> </pre> </div> <script async src="https://static.codepen.io/assets/embed/ei.js"></script>