【发布时间】：2019-12-15 16:55:54
【问题描述】：
期望的行为
在注册用户可以编辑页面内容的环境中显示嵌入的 codepen。
一个页面中可能添加了多个 codepen。
实际行为
将笔添加到 DOM 时，笔不显示，只显示笔的链接。
复制步骤
注意：以下步骤只是为了演示在我自己的环境中发生的逻辑，即注册用户在网站上编辑内容。
01) 转到这个随机选择的pen
02) 点击页面右下角的Embed链接
03) 从HTML (recommended)标签复制内容
04) 转至https://blog.codepen.io/documentation/features/embedded-pens
05) 打开 Chrome 开发者工具，将段落元素替换为嵌入代码
06）笔不会显示，只有一个链接，如：
See the Pen [pen_name] by [pen_author] on CodePen
问题
我需要采取哪些额外步骤来确保呈现 codepen？
鉴于嵌入代码的格式为：
<p class="codepen" data-height="300" data-theme-id="37516" data-default-tab="css,result" data-user="ste-vg" data-slug-hash="oKYjKV" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Clip Clop Clippity Clop">
<span>See the Pen <a href="https://codepen.io/ste-vg/pen/oKYjKV/">
Clip Clop Clippity Clop</a> by Steve Gardner (<a href="https://codepen.io/ste-vg">@ste-vg</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
期望脚本在粘贴到页面时会完成其工作似乎有点冒昧。
如果是这样，我如何动态添加内容（包括脚本标签）并确保它被执行？
编辑
我刚刚遇到了这个answer from 2010，它暗示了这种格式：
$.getScript("https://static.codepen.io/assets/embed/ei.js", function(){
console.log("running new js!");
});
当我在 Chrome 开发工具中运行它时，在将嵌入代码粘贴到 DOM 后，笔会被渲染。
- 这种方法有什么问题吗？
- 为什么不能将嵌入代码粘贴到 DOM 中“正常工作”？
- 嵌入代码中引用的脚本文件是否对笔是唯一的？
- 或者您是否可以将脚本添加到您的页面一次，它会处理所有嵌入的笔（现有的和动态添加的）？
我尝试将此添加到<head>：
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
并在那里似乎无法解析现有或动态添加的嵌入代码。
他们仍然只是显示消息：
See the Pen [pen_name] by [pen_author] on CodePen
再次编辑
使用<head> 中引用的脚本，我尝试在将 HTML 动态添加到 DOM 后调用它：
__CPEmbed()
它会渲染代码笔！
我不确定这是否是一种合法的方式，但我在本文末尾遇到了__CPEmbed：
【问题讨论】：
标签： javascript html codepen