访问 iFrame 中的元素答案

【问题标题】：Accessing element within iFrame访问 iFrame 中的元素
【发布时间】：2019-10-19 17:46:25
【问题描述】：

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

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

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

This 在 SO 上的帖子让我认为这与未打开开发工具时隐藏的元素有关。但是$("#player").children[0].removeClass("hidden") 返回TypeError: $(...).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>

【问题讨论】：

标签： javascript jquery iframe youtube-iframe-api

【解决方案1】：

使用 iFrame 时的简单规则是，只有当它从同一主机/来源提供时，您才能访问其中的内容。

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

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

【讨论】：

【解决方案2】：

您已经拥有 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();
}

【讨论】：

【解决方案3】：

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

有关此问题的更多详细信息，请参阅此帖子。

Override body style for content in an iframe

【讨论】：

可以使用 srcdoc 属性

【解决方案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>

【讨论】：