javascript - YouTube Iframe 嵌入导致 IE7 中的重定向

Question

这段代码适用于除 IE7 之外的所有浏览器。在 IE7 中，用户被重定向到 http://www.youtube.com 。哦，它不只是重定向框架，整个页面都被重定向!有什么想法吗？有想法吗？替代模式？

请帮助我。 IE 正在扼杀我的生存意志。

  $('.youtube .cue a').live('click', function(e) {
    e.preventDefault();
    var $this = $(this);
    var $area = $this.parents('.youtube');
    var $caption = $area.find('.videoDescription');
    var $li = $this.parents('li:first');
    var vid = $.trim($(this).attr('href').replace('#', ''));
    var title = $li.find('.title').text();
    var time = $li.find('.time').text();
    var description = $li.find('.description').text();

    var $frame = $('<iframe></iframe>').attr({
      width:595,
      height:350,
      frameborder: 0,
      src: 'http://www.youtube.com/embed/' + vid
    });

    if (!hasFlash) {
      $area.find('.captioned').html('<a href="http://get.adobe.com/flashplayer/" class="no-flash">Please install Flash</a>.');
    }
    else {
      $area.find('.captioned').html('').append($frame);
    }

    $caption.find('.title').html(title);
    $caption.find('.time').html(time);
    $caption.find('.description').html(description);
  });

Answer 1

在我看来就像这一行:

var vid = $.trim($(this).attr('href').replace('#', ''));

是问题所在。从 <a> 检索 href标签将返回一个完全限定的 URL(包括前面的 http://和域名)。然后，在这一行中，您将其添加到另一个完全限定 URL 的末尾:

src: 'http://www.youtube.com/embed/' + vid

这将产生如下奇怪的结果:

http://www.youtube.com/embed/http://www.domain.com/xxxxxx

对于 iframe src= 属性，这可能不是您想要的。

可能会让您绊倒的是从 <a href="index.html"> 检索 href标签检索完全限定的 URL，即使页面源只有相对 URL。如果您只需要该链接 href 中的路径或文件名，则必须将其解析。

我已经通过重建您的 HTML 和代码来验证，如果您向 iFrame 提供这种错误的 URL，它会重定向整个页面(即使在 Chrome 中)。这是jsfiddle:http://jsfiddle.net/jfriend00/4P3dh/ .

如果您点击“运行”，然后单击“Click Me”链接，由于 iFrame 上的 URL 不正确，它将重定向整个页面。