Question

这段相当短的代码：

<div id='votmplayer'></div>
<script>

  $.getJSON('/json/votm.json', function(votmjson) {
    $.getJSON('/cgi-bin/getvideo.cgi?'+votmjson.videos[0].id, function(votmchoice) {
      document.getElementById('votmplayer').innerHTML=votmchoice.embed.code;
        });
    });

</script>

产生意外的输出。呈现的HTML显示：

<div id='votmplayer'>
  "<iframe src="http://www.website.com/embed/abcdefghij123456" frameborder="0" width="608" height="468" scrolling="no"</iframe>"
</div>

当然，我将<iframe>作为文字文本。我尝试了以下但结果是一样的：

var choice = votmchoice.embed.code;
document.getElementById('votmplayer').innerHTML=choice;

console.log(votmplayer)在Chome中显示以下内容：

embed: Object
    code: "&lt;iframe src=&quot;http://www.website.com/embed/abcdefgij1234565&quot; frameborder=&quot;0&quot; width=&quot;608&quot; height=&quot;468&quot; scrolling=&quot;no&quot;&gt;&lt;/iframe&gt;"

我有点困惑，因为我在网页的其他地方使用了类似的代码并且它被正确呈现。我在谷歌周围找不到类似的东西，但也许我问的是错误的问题。

Answer 1

你正在使用JQuery（我是对的吗？）。所以：
JQuery可以从以下字符串创建节点：

$('<h1>Heading</h1>')

返回JQuery DOM元素。此外，它还有一种方法可以将HTML缩减的字符串转换为HTML字符串并从中创建JQuery节点：

$('#votmplayer').html( $.parseHTML(votmchoice.embed.code)[0].textContent );

我创建了一个有效的fiddle

Answer 2

如果您的回复文字正确，这应该会有所帮助

 $.getJSON('/json/votm.json', function(votmjson) {
    $.getJSON('/cgi-bin/getvideo.cgi?'+votmjson.videos[0].id, function(votmchoice) {
       if(votmchoice && votmchoice.embed && votmchoice.embed.code) {  
         $('#votmplayer').html(votmchoice.embed.code);
       }
    });
 });

更新：

尝试记录votmchoice.embed.code

console.log(votmchoice.embed.code);

如果它返回显示的内容类似于此"<iframe src="http://www.website.com/embed/abcdefghij123456" frameborder="0" width="608" height="468" scrolling="no"</iframe>"

您应该从服务器修复您的响应，或者只删除字符串中的引号，如下所示：

demo

var str = '"<iframe src="http://www.website.com/embed/abcdefghij123456" frameborder="0" width="608" height="468" scrolling="no"</iframe>"';
console.log(str.slice(1,-1));

JavaScript：为什么我的HTML中会出现“引号”？

2 个答案: