媒体嵌入数据显示为字符串而不是 HTML答案

【问题标题】：Media embed data showing up as string instead of HTML媒体嵌入数据显示为字符串而不是 HTML
【发布时间】：2015-10-09 20:39:15
【问题描述】：

好的，所以我构建了一个小应用程序，其中包含一些媒体嵌入数据（如 youtube 视频），以字符串的形式出现，如下所示：

"<iframe class="embedly-embed" src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2Fl5dvu4feCFk%3Ffeature%3Doembed&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3Dl5dvu4feCFk%26feature%3Dyoutu.be&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2Fl5dvu4feCFk%2Fhqdefault.jpg&key=2aa3c4d5f3de4f5b9120b660ad850dc9&type=text%2Fhtml&schema=youtube" width="600" height="338" scrolling="no" frameborder="0" allowfullscreen></iframe>"

我不记得这叫什么了，这就是为什么我很难在 Google 上找到答案。无论如何，我使用innerHTML 尝试将此iframe 添加到页面。它本身不起作用，所以我正在使用这行丑陋的代码来替换所有 &lt; 之类的东西：

element.innerHTML = embedData.replace("<", "<").replace("<", "<").replace(">", ">").replace(">", ">");

我知道这很难看，而且可能性能非常差，所以我正在寻找更好/“更正确”的解决方案。

这是一个极其简化的小提琴： https://jsfiddle.net/cvco8c23/

【问题讨论】：

您也可以粘贴您的代码吗？特别是定义了embedData 变量的代码。
添加了一个小提琴jsfiddle.net/cvco8c23

标签： javascript html dom youtube

【解决方案1】：

这是一种方法。

var a = document.getElementById('test');

a.innerHTML = '&lt;iframe class="embedly-embed" src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2Fl5dvu4feCFk%3Ffeature%3Doembed&amp;url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3Dl5dvu4feCFk%26feature%3Dyoutu.be&amp;image=https%3A%2F%2Fi.ytimg.com%2Fvi%2Fl5dvu4feCFk%2Fhqdefault.jpg&amp;key=2aa3c4d5f3de4f5b9120b660ad850dc9&amp;type=text%2Fhtml&amp;schema=youtube" width="600" height="338" scrolling="no" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;';

var v = a.childNodes[0].nodeValue;

var b = document.getElementById('test2');

b.innerHTML = v

这一切都在 DOM 中完成，但要在幕后使用：

var a = document.createElement('div');

这将取消转义文档中的文本（即准备将其呈现给用户），然后以未转义的形式返回。

JSFiddle

【讨论】：