Question

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

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

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

关于

This的帖子使我认为，如果未打开开发工具，则该元素与隐藏元素有关。但是$("#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>

Answer 1

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

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

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

Answer 2

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

例如：

spacingView

Answer 3

除非iframe与您的父域来自同一域，否则您无法更改iFrame中的内容。这就是查询结果为您提供undefined的原因。

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

Override body style for content in an iframe

在iFrame中访问元素

3 个答案: