Встраивание Youtube: небезопасная попытка JavaScript получить доступ к кадру
У нас есть приложение Wicket со страницей, включающей встроенное видео Youtube. Видео встраивается и воспроизводится отлично, но, судя по всему, это приводит к тому, что остальная часть страницы не отображается - кажется, что элементы DOM, которые появляются после встраивания, просто не отображаются на странице, несмотря на то, что они находятся в разметке.
Глядя на консоль ошибок в Chrome, вы обнаружите:
Небезопасная попытка JavaScript для доступа с URL-адресом http://example.com/detail/COMMUNICATION/search/com-sonyericsson-hanashiиз фрейма с URL-адресом http://www.youtube.com/embed/eJY7_De5opI?enablejsapi=1&autohide=1&showinfo=1. Домены, протоколы и порты должны матч.
Я искал это довольно много, и люди, кажется, говорят, что это безобидно и игнорировать его. Это просто кажется неправильным, и в нашем случае он фактически разбивает страницу.
Если мы изменим наше приложение, чтобы видео было встроено динамически с помощью обратного вызова ajax (пользователь нажимает на Wicket AjaxLink), мы все равно получаем ошибку в консоли, но по крайней мере страница полностью отображается. К сожалению, это не сработает для нас, так как нам нужно, чтобы видео было загружено по умолчанию, когда пользователь впервые попал на страницу.
Изменить. Я должен добавить, что хотя сообщение об ошибке было принято с консоли Chrome, эта ошибка влияет на каждый браузер, который я пробовал: Chrome, Safari и Firefox.
Ответы
Ответ 1
Ошибка безопасности вряд ли нарушит вашу страницу. Похоже, что ошибка происходит из рамки YouTube, а это означает, что в худшем случае содержимое фрейма будет испорчено.
Кадр/iframe с внешней страницы не может, ни при каких обстоятельствах не влиять на содержимое родительского документа, если они не принадлежат к одному домену и номеру порта. Это одно из жестких правил безопасности браузера.
Ошибка должна быть в другом месте вашей разметки. Есть ли вероятность увидеть пример разметки?
[править]
Ошибка также может быть в разметке вставки кода. Или, если какие-либо теги script включены непосредственно на страницу (не в iframe), она может быть там.
Обычно, когда такие проблемы случаются, это происходит из-за незакрытого тега где-то, но это может быть Javascript.
Ответ 2
Если у вас возникла проблема с этой ошибкой JavaScript, вы можете попробовать использовать старый код для встраивания YouTube. Это вариант на каждом видеоролике YouTube после нажатия на него. У вас не будет этой ошибки, потому что она не использует iframes. Код будет выглядеть примерно так:
<object width="560" height="315">
<param name="movie" value="http://www.youtube.com/v/9DXL9vIUbWg?version=3&hl=en_US&rel=0"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/9DXL9vIUbWg?version=3&hl=en_US&rel=0" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
Надеюсь, это поможет.
Ответ 3
Я голосовал за ответ Джонатана Торреса, потому что его код остановил предупреждения Javascript. Однако я обнаружил ошибки, когда я проверил код.
Итак, мой ответ таков:
Установите флажок "Использовать старый код встраивания" при использовании кода встраивания YouTube, чтобы вы не использовали iframe.
Чтобы проверить код, вам нужно добавить....
type="movie"
и
data="http://SAME YOUTUBE URL USED IN THE FIRST PARAM ELEMENT/"
в элемент OBJECT. Затем сделайте элемент PARAM самозакрывающимся (но не элементом EMBED).
Это должно сделать ваш код YouTube похожим на это...
<object width="560" height="315" type="movie" data="http://www.youtube.com/v/9DXL9vIUbWg?version=3&hl=en_US&rel=0">
<param name="movie" value="http://www.youtube.com/v/9DXL9vIUbWg?version=3&hl=en_US&rel=0"></param><param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<embed src="http://www.youtube.com/v/9DXL9vIUbWg?version=3&hl=en_US&rel=0" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
Затем вы не должны получать предупреждений Javascript, и ваш код должен проверять.
Ответ 4
Небезопасная попытка JavaScript для доступа к ошибке фрейма не имеет ничего общего с вашей рендерингом страницы. Наиболее вероятной причиной является поврежденная разметка (например, отсутствующая </iframe>
).
Что касается ошибки Unsafe JavaScript для доступа к ошибке кадра, у вас есть несколько вариантов:
-
Самое простое решение - использовать IFrame Player API вместо того, чтобы вручную добавлять теги iframe. API - это часть JavaScript, которая генерирует тег iframe для вас и добавляет параметры, которые (или должны) устранять ошибку доступа к кадру. Вот инструкции по использованию IFrame Player API для загрузки игрока.
-
Решение для руководства состоит в создании тегов <iframe>
и добавлении параметра &origin=http://example.com
к URL-адресам. Цитата:
В качестве дополнительной меры безопасности вы также должны указать источник параметр URL, указав схему URL (http://или https://) и полный домен вашей главной страницы в качестве значения параметра. Хотя происхождение является необязательным, в том числе он защищает от вредоносных сторонних JavaScript вводится на вашу страницу и захватывает ваш YouTube.
Ответ 5
для меня это сработало с помощью кода здесь:
https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player
строки я фиксированные см. на рынке слов с 2 звездочками ** код:
из этого:
var tag = document.createElement('script');
tag.src = "**http://www.youtube.com/player_api**";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var players = new Array();
function **onYouTubePlayerAPIReady()** {
var ids = $('div.video div');
for(var i=0; i < ids.length; i++) {
players.push(new YT.Player('**yt**'+i, {
height: '400',
width: '596',
videoId: $(ids[i]).attr('rel'),
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
}));
}
}
:
var tag = document.createElement('script');
tag.src = "**https://www.youtube.com/iframe_api**";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var players = new Array();
function **onYouTubeIframeAPIReady()** {
var ids = $('div.video div');
for(var i=0; i < ids.length; i++) {
players.push(new YT.Player('**player**'+i, {
height: '400',
width: '596',
videoId: $(ids[i]).attr('rel'),
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
}));
}
}