Доступ к элементу внутри iFrame - PullRequest
Новая
       43

Доступ к элементу внутри iFrame

1 голос
/ 19 октября 2019

Мне нужно получить текущее время видео YouTube, которое я воспроизводлю в iFrame, но не могу получить доступ к видео из моего скрипта.

Я могу без проблем использовать console.alert($("#player").children[0].getCurrentTime()) после выборавидео в браузере инструментов разработки.

Однако я получаю TypeError: Cannot read property 'getCurrentTime' of undefined, когда тот же код запускается из скрипта.

Эта публикация на SO заставила меня подумать, что это связано с элементомскрыт, если инструменты разработки не открыты. Однако $("#player").children[0].removeClass("hidden") возвращает TypeError: $(...).contents is not a function at <anonymous>. Элемент, кажется, просто не существует.

Ниже приведен полный код, 90% которого прямо из первого примера iframe здесь . 

<!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>

Ответы [ 3 ]

2 голосов
/ 19 октября 2019

При работе с iFrame простое правило заключается в том, что вы можете получать к нему доступ только в том случае, если он обслуживается с одного хоста / источника.

Это стандартное поведение во всех браузерах в отношении безопасности. В итоге, нет прямого способа доступа к содержимому iFrame, если он из другого домена.

В этом случае единственное решение, которое я вижу, состоит в том, что, поскольку вы создаете с помощью API YouTube, просто кэшируйте объект проигрывателя, который вы используете. созданный в var, а затем просто изучить методы в нем в консоли

0 голосов
/ 25 октября 2019

У вас уже есть объект var для проигрывателя YouTube, поэтому вам не нужно перемещаться по 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();
}
0 голосов
/ 19 октября 2019

Вы не можете изменять содержимое внутри iFrame, если iframe не принадлежит тому же домену, что и ваш родитель. Вот почему результат запроса дает вам undefined.

Пожалуйста, обратитесь к этому сообщению для получения дополнительной информации об этой проблеме.

Переопределить стиль тела для содержимого в iframe

...