javascript - 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": "<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 攻击。