iFrameコンテンツをJqueryで読む（iFrameはそれ以上のAjaxを読み込みます）

Question

私はiFrameで実装するビデオプレーヤーを持っています。

<iframe 
     src="//player.twitch.tv/?video=v209807471&autoplay=true&time=02h59m45s" 
     frameborder="0" 
     scrolling="no" 
     allowfullscreen="true" 
     id="tFrame" 
     class="ls-vod-iframe" 
> 
</iframe> 

私は今、このiframeの内部.player-seek__timeスパンに位置している現在のタイムスタンプを読みたいです。

//player.twitch.tv/?video=v209807471&autoplay=true&time=02h59m45sのソースコードを確認すると、#video-playbackの空のdivが表示されるので、内部的に別の呼び出しでその内容が読み込まれるとします。

私はこれでそれを試してみました：

var $playerBody = $('#tFrame').contents().find('#video-playback'); 
var $ts = $playerBody.find('.player-seek__time'); 
console.log($ts); 

しかし$ts.lengthが0です。

.player-seek__timeのコンテンツを取得する別の方法がありますか、一般的に上記のコードに問題がありますか？

Answer 1

getTimeStamp = function() { 
 
    var frameDoc = document.getElementById('tFrame').contentDocument; 
 
    if (frameDoc) { 
 
    return frameDoc.body.querySelector('#video-playback > .player-seek__time').textContent; 
 
    } 
 
    else { 
 
    return false; //maybe access is blocked by the website 
 
    } 
 
} 
 

 
document.getElementById('tFrame').addEventListener('load', function() { 
 
    alert(getTimeStamp()); 
 
});

<iframe 
 
     src="//player.twitch.tv/?video=v209807471&autoplay=true&time=02h59m45s" 
 
     frameborder="0" 
 
     scrolling="no" 
 
     allowfullscreen="true" 
 
     id="tFrame" 
 
     class="ls-vod-iframe" 
 
> 
 
</iframe>

これは、一般的に動作するはずですが、その単収縮はあなたがIFRAME内の自分のサイトをロードすることはできませんようですか？ same-origin-policyによってアクセスが妨げられる可能性もあります。 私の場合は、このコードをタブ内のコンソールから使用する場合にのみ機能します。