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는 액세스를 차단할 수 있습니다. 이 코드는 탭 안의 콘솔을 통해이 코드를 사용할 때만 작동합니다.