媒體嵌入數據顯示爲字符串而不是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

回答

相關問題