Question

在这个函数中，我正在使用JSON从Youtube中恢复数据。此功能适用于Chrome和Mozilla。但它在IE中无效。

  function test(url){

      var youtube_id = url.replace(/^[^v]+v.(.{11}).*/,"$1");
     $.getJSON('http://gdata.youtube.com/feeds/api/videos/'+youtube_id+'?v=2&alt=json', function(data) {
      var title = data.entry.title.$t;
      var description = data.entry.media$group.media$description.$t;
      var thumbnail = data.entry.media$group.media$thumbnail[0].url;
       var imgdata = "<img src ='"+thumbnail+"' />";

    alert(title);
      });
      // alert(youtube_id);// Use these variables somewhere

  }

你能帮助我吗？

Thanx提前!!!

Answer 1

这是因为IE（直到IE 10）不支持Cross-Domain Resource Sharing。

当您使用Firefox，Safari，Chrome，Opera等发出请求时，浏览器首先向服务器发出OPTIONS请求，并在标题中查找Access-Control-Allow-Origin，向浏览器说明，允许哪些外国网站对此域提出请求。

gdata API的标头是：

HTTP/1.1 200 OK
X-GData-User-Country: US
Content-Type: application/json; charset=UTF-8
Access-Control-Allow-Origin: *
Expires: Tue, 15 Jan 2013 15:02:28 GMT
Date: Tue, 15 Jan 2013 15:02:28 GMT
Cache-Control: private, max-age=300, no-transform
Vary: *
GData-Version: 2.1
ETag: W/"C0EGQn47eCp7I2A9WhNbEks."
Last-Modified: Tue, 15 Jan 2013 14:53:43 GMT
Transfer-Encoding: chunked
X-Content-Type-Options: nosniff
X-Frame-Options: SAMEORIGIN
X-XSS-Protection: 1; mode=block
Server: GSE

该Access-Control-Allow-Origin: *标题表示允许在此页面上调用任何外页（即未通过与访问的API相同的协议，主机和端口提供的页面）。

但是，IE不能正确支持该标准。

但是，您可以使用gdata API支持的JSONP标准来规避这一点。

更改您的$.getJSON来电，在网址末尾加?。这就是你向jQuery that you'd like to use JSONP解释拨打电话的方法，这允许外国网站。

e.g：

var youtube_id = url.replace(/^[^v]+v.(.{11}).*/,"$1");
     $.getJSON('http://gdata.youtube.com/feeds/api/videos/'+youtube_id+'?v=2&alt=json?', function(data) {
        var title = data.entry.title.$t;
        var description = data.entry.media$group.media$description.$t;
        var thumbnail = data.entry.media$group.media$thumbnail[0].url;
        var imgdata = "<img src ='"+thumbnail+"' />";
        alert(title);
      });

getJSON不适用于Youtube的IE浏览器

1 个答案: