Невозможно получить доступ к элементам iframe DOM, не предварительно выбрав их с помощью инструментов разработчика

Question

Я делаю расширение Chrome, которое обращается к элементам видео на веб-страницах. Это iframe и дочерний элемент видео . При попытке получить доступ к iframe DOM с помощью (это находится в скрипте содержимого, запущенном на странице):

function GetIframeDocument(){
    var iframe = document.getElementById("vilos-player");
    var doc = iframe.contentWindow.document;
    var videoElement = doc.getElementByid("player_html5_api");
}

Я получаю ошибку:

Uncaught DOMException: Blocked a frame with origin "https://www.crunchyroll.com" from accessing a cross-origin frame.
    at <anonymous>:1:21

Однако, если я зайду в инструменты разработчика Chrome и сделаю элемент видео глобальной переменной (, как это ). Затем я могу применить javascript к элементу в консоли, не сталкиваясь с ошибкой фрейма перекрестного источника (, как показано здесь ).

Как я могу получить доступ к элементу видео в моем скрипте, не сталкиваясь с ошибкой? Если я могу получить к нему доступ в консоли, и это можно увидеть в элементах страницы в инструментах разработчика.

Answer 1

Как мы можем прочитать в документах

Элемент HTML Inline Frame () представляет собой вложенный контекст просмотра, встраивая другую HTML-страницу в текущую.

Итак, у элемента iframe есть собственный оконный объект, и для доступа к нему вы можете использовать предопределенный метод contentWindow () .

См. Метод описание и W3Schools пример .

Answer 2

Я не знаю, что вам нужно делать, но, очевидно, получить ссылку на видео.Рекомендую вводить свой JavaScript с помощью расширения Chrome.Во время создания расширения установите параметр

all_frames = true

https://developer.chrome.com/extensions/content_scripts

, тогда ваш код будет на всех страницах и на iframe тоже.