如何从可编辑的CodePen Embed嵌入Pen中获取HTML代码

完全可以提取开启可编辑属性的CodePen嵌入Pen中的HTML代码，无需绕开浏览器同源策略，按使用场景选择对应方案即可：

提取嵌入时的初始HTML代码 #

示例中属于data-prefill模式的可编辑嵌入，这类嵌入的初始源码并不存储在跨域iframe内，而是直接存放在当前页面.codepen容器的子节点中，直接读取本地DOM就能获取，完全不涉及跨域问题：

// 定位CodePen嵌入容器
const penContainer = document.querySelector('.codepen')
// 读取HTML区块内容，自动去除首尾多余空白
const initHtml = penContainer.querySelector('pre[data-lang="html"]').textContent.trim()

该方法仅能获取嵌入时写入的初始代码，无法拿到用户在可编辑区域修改后的内容。

提取用户编辑后的实时HTML代码 #

如果需要获取用户在嵌入编辑器中修改后的最新代码，要使用CodePen官方支持的postMessage通信通道。postMessage调用失败通常是三个原因：调用时机过早（iframe未完成加载就发消息）、未指定正确的目标源、消息格式不符合官方约定。正确实现代码如下：

// 等待页面资源加载完成，确保CodePen iframe渲染完毕后再执行
window.addEventListener('load', () => {
  const penIframe = document.querySelector('.codepen iframe')
  if (!penIframe) return

  // 监听iframe回传的消息
  window.addEventListener('message', (event) => {
    // 校验消息来源，过滤非目标源的无效消息
    if (event.origin !== 'https://codepen.io') return
    // 识别代码回传消息
    if (event.data?.type === 'currentCode') {
      const latestHtml = event.data.data.html
      // 此处即可拿到用户编辑后的最新HTML代码
      console.log(latestHtml)
    }
  })

  // 向iframe发送获取代码的请求，必须指定明确目标源，不能使用通配符*
  penIframe.contentWindow.postMessage(
    { type: 'getCurrentCode' },
    'https://codepen.io'
  )
})

注意事项 #

• 浏览器同源策略拦截直接读取iframe内容是正常的安全机制，不要尝试绕开，官方提供的postMessage通道是唯一合规的交互方式
• 如果作为第三方访客提取其他网站上嵌入的可编辑Pen代码，无法通过postMessage获取其他用户编辑后的内容（这类内容仅存储在访问者本地浏览器环境中），只能通过查看页面源码，读取.codepen容器内pre[data-lang="html"]节点的方式获取初始嵌入的代码。

内容的提问来源于stack exchange，提问作者Dantio