访问 iFrame 中的元素

Question

我需要获取我在 iFrame 中播放的 YouTube 视频的当前时间，但无法从我的脚本访问该视频。

在浏览器开发工具中选择视频后，我可以毫无问题地使用 console.alert($("#player").children[0].getCurrentTime())。

但是，当相同的代码来自脚本运行时，我得到 TypeError: Cannot read property 'getCurrentTime' of undefined。

SO 上的

This post 让我认为如果未打开开发工具，它与被隐藏的元素有关。然而$("#player").children[0].removeClass("hidden")returnsTypeError: $(...).contents is not a function at <anonymous>。该元素似乎不存在。

下面是完整代码，其中 90% 直接来自第一个 iframe 示例 here。

<!DOCTYPE html>
<html>
<body>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>
    // 2. This code loads the IFrame Player API code asynchronously.
    var tag = document.createElement('script');

    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    // 3. This function creates an <iframe> (and YouTube player)
    //    after the API code downloads.
    var player;
    function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
            height: '390',
            width: '640',
            videoId: 'U03lLvhBzOw',
            events: {
                'onReady': onPlayerReady
            }
        });
    }

    // 4. The API will call this function when the video player is ready.
    function onPlayerReady(event) {
        event.target.playVideo();
        console.alert($("#player").children[0].getCurrentTime()) //DOESN'T WORK
    }

</script>
</body>
</html>

Answer 1

您无法更改 iFrame 中的内容，除非 iframe 与您的父级来自同一域。这就是查询结果为您 undefined.

的原因

请参阅此 post 以了解有关此问题的更多详细信息。

Override body style for content in an iframe

Answer 2

使用 iFrame 的简单规则是，只有当它来自同一个 host/origin。

时，您才能访问其中的内容

这是所有浏览器在安全方面的标准行为。最重要的是，如果来自不同的域，则无法直接访问 iFrame 的内容。

在这种情况下，我看到的唯一解决方案是，因为您是使用 Youtube API 创建的，只需将您创建的播放器对象缓存到 var，然后在控制台中探索其中的方法

Answer 3

您已经拥有 YouTube 播放器的 var 对象，因此无需导航 DOM。

例如：

// Play the video
function onPlayerReady(event) {
    player.playVideo();
    console.log(player.getCurrentTime());

    // Jump to 10 seconds
    player.seekTo(10);

    // Stop the video after 3 seconds
    setTimeout(stopVideo, 3000);
}

function stopVideo() {
    console.log(player.getCurrentTime());
    player.stopVideo();
}

Answer 4

我用 DOM 来完成这项工作。这在与 Vimeo 视频播放接口时变得至关重要，其中 iframe 根本不会有 id，但它之外的 DIV 有。为了控制视频的播放，只好把iframe弄到里面了。

我想您可以在 YouTube 上做类似的事情。对我来说，Vimeo 是重点。

<div id="260309722" name="260309722" class="hook">
<iframe  src="https://player.vimeo.com/video/260309722" width="500" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

<script>
var tmp          = document.getElementById("260309722").querySelectorAll("iframe"); 
var iframe       = tmp[0];          // grab the iframe inside

VideoControl(iframe, TeaserLen);

function VideoControl(iframe, TeaserLen)
{
var Videoplayer  = new Vimeo.Player(iframe);
    Videoplayer.on('timeupdate', function(progress) {
var Progress = progress.percent * 100;
var Playtime = progress.seconds;
var Playtime2 = Videoplayer.getCurrentTime();
  
   if (Playtime >= TeaserLen)
   {
     var bPaused = Playtime2;   
     Videoplayer.pause();

    // do something else
   }            //  if (Playtime >= TeaserLen)
 });            // Videoplayer.on('timeupdate', function(progress)
}               // function VideoControl(iframe, TeaserLen)
</script>

访问 iFrame 中的元素

Accessing element within iFrame

javascript

iframe

jquery

youtube-iframe-api