Youtube - SecurityError: блокировал фрейм с нулевым происхождением от доступа к фрейму с перекрестным происхождением.

Question 1

Я создал веб-сайт, который открывает всплывающее окно с этим кодом JavaScript :

document.getElementById("i_song_name").innerHTML = 
'<iframe width="100" height="100" src="https://www.youtube.com/v/FjNdYp2gXRY?autoplay=1" id="i_song_name_i"></iframe>';

Этот код добавляет тег iframe к тегу span.

Затем в JS я хочу получить название веб-сайта YouTube с помощью этого кода:

 document.getElementById("h3").innerHTML =
       document.getElementById("i_song_name_i")
           .contentWindow.document.head
           .getElementsByTagName("title")[0].innerHTML
           .replace(" - YouTube", "");

Итак, я хочу получить этот код:

<span id="i_song_name">
        <iframe width="100" 
                height="100" 
                src="https://www.youtube.com/v/FjNdYp2gXRY?autoplay=1"
                id="i_song_name_i"></iframe>
</span>
<div id="h3">Ahrix - Nova [NCS Release]</div>

К сожалению, мой браузер (Google Chrome) по-прежнему выдает ошибку:

SecurityError: заблокировал фрейм с нулевым происхождением доступ к фрейму с перекрестным происхождением.

Есть идеи, как решить эту проблему?

javascript iframe

0

PDKnight 22 Авг 2014 в 20:50

Это цель защиты. возможно, вы можете использовать для этого API YouTube.

–

akonsu

22 Авг 2014 в 20:53

Я не публикую это как ответ, потому что он использует jQuery, а вы не указали, что использовали его. Но вот пример использования AJAX для запроса HTML-страницы с последующим извлечением из него заголовка: stackoverflow.com/questions/7599365/…. Другими словами, вы можете сделать отдельный вызов через AJAX, чтобы получить заголовок.

–

jwatts1980

22 Авг 2014 в 20:55

Кстати, один из ответов в этой статье использует регулярное выражение для извлечения заголовка из текста ответа. Это то, что вы можете сделать в чистом javascript.

–

jwatts1980

22 Авг 2014 в 20:57

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

–

jwatts1980

23 Авг 2014 в 00:51

Эта статья может помочь вам с отправной точкой для знакомства с API YouTube: apiblog.youtube.com/2012/05/…

–

jwatts1980

23 Авг 2014 в 00:52

Answer

Я РЕШИЛ ЭТО! Я использовал YouTube API, он отлично работает :)

Изменить (декабрь 2015 г.). Вот исправленная версия кода:

Рабочая демонстрация

<!DOCTYPE HTML>
<html>
<head>
    <style>
        #player {
            display: none;
        }
    </style>
</head>
<body>
<div id="player"></div>
<div id="h3"></div>
<input type="text" placeholder="Type YTB link here" id="input_ytb_link">
<input type="button" value="Confirm!" id="confirm_btn">
<script>
/* String.startsWith(str) */
if (typeof String.prototype.startsWith != 'function'){String.prototype.startsWith = function (str){return this.indexOf(str) == 0;};}

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

function onYouTubeIframeAPIReady() {
    // do nothing...
}
function setPlayer(w, h, url, eventz) {
    if (/^https?:\/\/(www\.)?youtube\.com\/.+\?(.+)?v=(.+)?$/.test(url)) {
        if (document.getElementById('player'))
            document.getElementById('player').outerHTML = '<div id="player"></div>';
        player = undefined;
        document.getElementById('h3').innerHTML = 
                'Processing, please wait a second...';
        var pos = url.indexOf('v='),
            id = url.substring(pos+2,pos+13);
        player = new YT.Player('player', {
                height: h,
                width: w,
                videoId: id,
                events: eventz
        });
    }
}
function onPlayerReady(evt) {
        document.getElementById('h3').innerHTML = 
                evt.target.getVideoData().title;
        //evt.target.playVideo();
}
confirm_btn.addEventListener('click', function(){
    setPlayer('1','1', input_ytb_link.value, {'onReady':onPlayerReady});
});
</script>
</body>
</html>

Спасибо за помощь !!

5

PDKnight 24 Дек 2015 в 17:14

Question 2

Я РЕШИЛ ЭТО! Я использовал YouTube API, он отлично работает :)

Изменить (декабрь 2015 г.). Вот исправленная версия кода:

Рабочая демонстрация

<!DOCTYPE HTML>
<html>
<head>
    <style>
        #player {
            display: none;
        }
    </style>
</head>
<body>
<div id="player"></div>
<div id="h3"></div>
<input type="text" placeholder="Type YTB link here" id="input_ytb_link">
<input type="button" value="Confirm!" id="confirm_btn">
<script>
/* String.startsWith(str) */
if (typeof String.prototype.startsWith != 'function'){String.prototype.startsWith = function (str){return this.indexOf(str) == 0;};}

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

function onYouTubeIframeAPIReady() {
    // do nothing...
}
function setPlayer(w, h, url, eventz) {
    if (/^https?:\/\/(www\.)?youtube\.com\/.+\?(.+)?v=(.+)?$/.test(url)) {
        if (document.getElementById('player'))
            document.getElementById('player').outerHTML = '<div id="player"></div>';
        player = undefined;
        document.getElementById('h3').innerHTML = 
                'Processing, please wait a second...';
        var pos = url.indexOf('v='),
            id = url.substring(pos+2,pos+13);
        player = new YT.Player('player', {
                height: h,
                width: w,
                videoId: id,
                events: eventz
        });
    }
}
function onPlayerReady(evt) {
        document.getElementById('h3').innerHTML = 
                evt.target.getVideoData().title;
        //evt.target.playVideo();
}
confirm_btn.addEventListener('click', function(){
    setPlayer('1','1', input_ytb_link.value, {'onReady':onPlayerReady});
});
</script>
</body>
</html>

Спасибо за помощь !!

5

PDKnight 24 Дек 2015 в 17:14

Youtube - SecurityError: блокировал фрейм с нулевым происхождением от доступа к фрейму с перекрестным происхождением.

1 ответ

Рабочая демонстрация

Похожие вопросы

Связанные вопросы

Новые вопросы

javascript