YouTube IE7でiframeを埋め込むとリダイレクトが発生する

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の最後にそれを追加するつもりだ：用

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

：このような奇妙な結果を得るために起こって

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

iframe src =あなたが望んでいない可能性の高い属性。

<a href="index.html">タグからhrefを取得すると、ページソースに相対URLのみが含まれていても、完全修飾URLが取得されます。そのリンクhrefからのパスまたはファイル名だけが必要な場合は、それを解析する必要があります。

あなたのHTMLとコードの再構成で、この種の悪いURLをiFrameに付けると、（Chromeの場合でも）ページ全体がリダイレクトされることが確認されました。ここにjsfiddle：http://jsfiddle.net/jfriend00/4P3dh/があります。

「実行」をクリックし、「クリックしてください」というリンクをクリックすると、iFrameのURLが正しくないためページ全体がリダイレクトされます。