我有一个使用 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
的内容吗?或者上面的代码总体上有什么问题吗?
最佳答案
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>
这应该可以正常工作,但似乎 twitch 不允许您在 iframe 中加载他们的网站? 同源策略也可能阻止访问。 对我来说,它仅在通过选项卡内的控制台使用此代码时才有效。
关于javascript - 使用Jquery读取iFrame内容(iFrame本身加载更多ajax),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47845502/