如何动态添加代码笔嵌入并确保它被渲染？

Question

期望的行为

在注册用户可以编辑页面内容的环境中显示嵌入式代码笔。

一个页面中可能添加了多个代码笔。

实际行为

添加笔到DOM时，笔不显示，只显示link到笔。

重现步骤

注意：以下步骤只是为了演示在我自己的环境中发生的逻辑，即注册用户在网站上编辑内容。

01) 转到这个随机选择的pen
02) 点击页面右下方的Embed link
03) 从 HTML (recommended) 选项卡
复制内容 04) 转到 https://blog.codepen.io/documentation/features/embedded-pens
05) 打开Chrome开发者工具，用嵌入代码替换一个段落元素
06）笔不会显示，只有一个link like:

See the Pen [pen_name] by [pen_author] on 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 'just work' 中粘贴嵌入代码？
嵌入代码中引用的脚本文件是笔独有的吗？
或者您是否可以只将脚本添加到您的页面一次，它就可以处理所有嵌入的笔（现有的和动态添加的）？

我尝试将此添加到 <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：

https://blog.codepen.io/documentation/prefill-embeds

Answer 1

我看你已经想通了！是的，__CPEmbed() 是触发 iframe 插入的官方 API。如果您想定位某些嵌入，您甚至可以为其提供特定的选择器：__CPEmbed('.my-codepen-embed')

默认在document.readyState !== 'loading'时触发，但您可以随时调用。多次调用不应影响已转换的嵌入。

我在我们的常规嵌入文档中找不到这个了，所以我记下来更新它。

谢谢！

如何动态添加代码笔嵌入并确保它被渲染？

How to dynamically add codepen embed and ensure it is rendered?

html

javascript

codepen