来自 json 的字符串被写为文本而不是 dom 元素

Question

document.getElementById("id").innerHTML = "<div>new div</div>";

写一个新的 div 元素没问题，但是来自 json 的字符串：

document.getElementById("id").innerHTML = jsonData.data.children[i].data.media.oembed.html;

总是写成带引号的文本！

 (ie: "<iframe></iframe").

产量：

<div id="id">
   "<iframe></iframe>"
</div>

而不是

<div id="id">
   <iframe></iframe>
</div>   //as expected

我不明白为什么。我想将此字符串作为不带引号的字符串写入 el.innerHTML，因此它就像一个简单的元素。

data from reddit.json

示例：

html: "<iframe class="embedly-embed" src="//cdn.embedly.com/widgets/media.html?src=http%3A%2F%2Fwww.youtube.com%2Fembed%2FJq9JMm9h9cA%3Ffeature%3Doembed&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DJq9JMm9h9cA&image=http%3A%2F%2Fi.ytimg.com%2Fvi%2FJq9JMm9h9cA%2Fhqdefault.jpg&key=2aa3c4d5f3de4f5b9120b660ad850dc9&type=text%2Fhtml&schema=youtube" width="600" height="450" scrolling="no" frameborder="0" allowfullscreen></iframe>"provider_name: "YouTube"provider_url: "http://www.youtube.com/"thumbnail_height: 360thumbnail_url: "http://i.ytimg.com/vi/Jq9JMm9h9cA/hqdefault.jpg"thumbnail_width: 480title: "Good Doggy"type: "video"url: "http://www.youtube.com/watch?v=Jq9JMm9h9cA"version: "1.0"width: 600__proto__: Objecttype: "youtu.be"__proto__: Object

Answer 1

您正在访问的 html 属性是 XML 编码的：

"html": "&lt;iframe class=\"embedly-embed\" src=\"https://cdn.emb......

注意开头的 <。

为了将其用作 HTML，您需要对其进行解码。执行此操作的一种方法是将其分配给 .innerHTML，将其作为文本检索，然后再次将其分配给 .innerHTML：

var el = document.getElementById("id");
el.innerHTML = jsonData.data.children[i].data.media.oembed.html;
el.innerHTML = el.textContent;    // assign it for a second time

强制性警告：确保您非常信任您在此处使用的内容的来源。如果来源不可信，这会打开您的站点以进行 XSS 攻击。

来自 json 的字符串被写为文本而不是 dom 元素

string from json is being written as text and not as dom elements

javascript

iframe

json

dom