Question

好的，所以我构建了一个小应用程序，其中包含一些媒体嵌入数据（如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>"

我不记得这叫什么，这就是为什么我很难给谷歌一个答案。无论如何，我使用innerHTML尝试将此iframe添加到页面。它本身不起作用所以我使用这个丑陋的代码行来替换所有<类的东西：

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

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

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

Answer 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

Answer 2

您可以使用jquery来编码/解码来构建辅助函数。以下代码适用于我：

var element = document.querySelector('#element')

var embedData = '&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;';


function htmlEncode(value) {
    return $('<div/>').text(value).html();
}

function htmlDecode(value) {
    return $('<div/>').html(value).text();
}
$('#element').html(htmlDecode(embedData));

Media将数据显示为字符串而不是HTML

2 个答案: