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

好了，所以我建立了一个小的应用程序，有一些媒体嵌入数据（如YouTube视频）以字符串的形式到来，这将是这个样子：媒体嵌入数据显示为字符串而不是HTML

"<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(">", ">");

我知道，这是丑陋的，可能非常underperformant，所以我寻找更好/更“正确”的解决方案。

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

来源

2015-07-20 Dave Lunny

你能粘贴你的代码吗？特别是定义了'embedData'变量的代码。 – mwilson

添加小提琴https://jsfiddle.net/cvco8c23/ –

下面是做到这一点的方法之一。

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

来源

2015-07-20 16:25:55 JBux

-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));

来源

2015-07-20 16:49:10 mwilson

对不起，在这个项目中不使用jQuery ...只有香草JS！ :) –

你没有提到你需要一个非jquery解决方案 – mwilson

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

回答

相关问题