我的动态 YouTube 加载代码一直有效,但不再有效。这是相关的jQuery:
$("#btnSubmit").click(function (e) {
var searchTerm = "";
if ($("#inputText").val() !== "") {
searchTerm = $("#inputText").val();
} else {
searchTerm = "jquery";
}
var urlYouTube = "http://gdata.youtube.com/feeds/api/videos?vq='" + searchTerm + "'&max-results=7&orderby=published&alt=json";
$.getJSON(urlYouTube, function (data) {
// Loop through each feed entry
alert("made it into ewe toob");
$.each(data.feed.entry, function (i, item) {
// Get the URL for the video
var url = item.link[0].href;
// Get the title of the video
var title = item.title.$t;
// Get the first 10 characters of date video was published or: YYYY-MM-DD
var datepublished = item.published.$t.substring(0, 10);
// Get the author name
var author = item.author[0].name.$t;
// Get the thumbnail image for the video
var thumbnailURL = item.media$group.media$thumbnail[0].url;
// Construct the display for the video
var text =
"<br><a href='" + url + "'>" + title + "</a><br>" +
"Published: " + datepublished + " by " + author + "<br><br>" +
"<img src='" + thumbnailURL + "'><br>";
// Append the text string to the div for display
$("#duckbilledPlatypusTab-YouTube").append(text);
});
});
});
这不再用视频填充我的“You Tube”标签。事实上,我从来没有看到,“把它做成母羊toob”。
我一直试图在 iframe 中显示结果,但由于不再显示结果,我进入调试模式,将 F12 捣碎,然后看到:
Refused to display 'http://gdata.youtube.com/feeds/api/videos?vq=platypus&max-results=7&orderby=published&alt=json' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'. about:blank:1
所以我从这个改变了html:
<div id="duckbilledPlatypusTab-YouTube" style="min-height: 50vh">
<iframe style="min-height: 100%;min-width: 100%" src="@urlYouTube"></iframe>
</div>
...简单地说:
<div id="duckbilledPlatypusTab-YouTube" style="min-height: 50vh">
@urlYouTube
</div>
...我在该选项卡中得到的只是:“ http://gdata.youtube.com/feeds/api/videos?vq=platypus&max-results=7&orderby=published&alt=json ”
IOW,我不再收到控制台错误消息,但我仍然没有收到视频。我也试过“@Html.Raw(urlYouTube)”有人知道为什么会失败以及如何解决这个问题吗?
更新
它仍然无法正常工作(警报甚至不会弹出和唠叨),即使代码现在是这样的:
HTML
<div id="duckbilledPlatypusTab-YouTube" style="min-height: 50vh">
</div>
jQuery
$.support.cors = true;
$(document).ready(function () {
$("#duckbilledPlatypusTabs").tabs();
//This doesn't seem to do anything...
$.ajaxSetup({ cache: false });
$("#btnSubmit").click(function (e) {
var searchTerm = "";
if ($("#inputText").val() !== "") {
searchTerm = $("#inputText").val();
} else {
searchTerm = "jquery";
}
. . .
var urlYouTube = "http://googleapis.com/youtube/v3/search?part=snippet&q='" + searchTerm + "'";
. . .
});
});