На веб-сайте WordPress, над которым я работаю, есть всплывающее окно на главной (домашней) странице, которое содержит iframe Vimeo.
Я поместил Javascript в header.php для взаимодействия с проигрывателем Vimeo, который работает как шарм везде, где Vimeo Player встроен непосредственно в страницу / шаблон / документ.
Однако на домашней странице, где iframe встроен во всплывающее окно (плагин Popup Builder), JS не может взаимодействовать с iframe и выдает такую ошибку:
Uncaught TypeError: You must pass either a valid element or a valid id. at new Player (player.js:2)
Что я могу сделать, чтобы JS мог публиковать и получать сообщения из iframe во всплывающем окне?
Iframe:
<iframe src = "https://player.vimeo.com/video/76979871?autoplay=1&muted=1" width = "640" height = "360" frameborder = "0" webkitallowfullscreen mozallowfullscreen allowfullscreen encrypted-media"></iframe>
Добавление JS Vimeo API в header.php:
<script src = "https://player.vimeo.com/api/player.js"></script>
Скрипт JS (те же результаты, если я поместил его в верхний, нижний колонтитул или непосредственно в шаблоне главной страницы)
<script>
document.getElementById("fp-btn").addEventListener("click", function(){
var iframe = document.querySelector('iframe');
var player = new Vimeo.Player(iframe);
player.on('ended', function() {
document.getElementById("clickTHIS").click();
});
player.getVideoTitle().then(function(title) {
console.info('title:', title);
});
});
</script>
Сценарий EventListener делает то, что должен ждать. Но когда я нажимаю ссылку, чтобы вызвать всплывающее окно с iframe Vimeo внутри, оно выдает следующую ошибку:
*The player element passed isn’t a Vimeo embed. at new Player (player.js:2) at HTMLSpanElement. ((index):492)
Что относится к этой строке: var player = new Vimeo.Player(iframe);
Я также пробовал изменить querySelector на document.querySelector('iframe[href* = "vimeo.com"]');, но затем он просто возвращается к той же ошибке, что и раньше:
TypeError: You must pass either a valid element or a valid id. at new Player (player.js:2)
Как я уже сказал, код работает где угодно на сайте, если iframe встроен непосредственно на страницу, а не во всплывающее окно / лайтбокс или модальное окно.
Я все еще потерялся здесь, поэтому, если кто-то имел опыт работы с этой проблемой или имеет представление о том, что вызывает проблему и как ее исправить, я был бы очень признателен.
@Jeto Спасибо. Да, это работает, и именно так я реализую сценарий на других страницах, где iframe встроен непосредственно в страницу / шаблон. Проблема в том, что я встраиваю этот iframe через плагин. Так что, когда пользователи нажимают ссылку, запускается всплывающее окно с iframe внутри. Вот когда у меня возникают проблемы и возникают эти ошибки. Похоже, что JS не может взаимодействовать со всплывающим окном плагина.
Вы уверены, что iframe загружается с правильным URL-адресом при запуске проигрывателя vimeo? Можно console.info(iframe.src) прямо перед вызовом конструктора?
@Jeto Хорошо, при этом я получаю сообщение об ошибке: Uncaught ReferenceError: iframe is not defined at <anonymous>:1:13. На панели инструментов построителя всплывающих окон у меня есть опция Insert Custom JS Variable. Я не уверен, что это значит, но если я нажму на нее, появится возможность ввести селектор и атрибут, а затем нажать «Вставить». Могу я как-нибудь это использовать?
Понятия не имею, потому что я ничего не знаю об этом конструкторе всплывающих окон. Это «традиционное» всплывающее окно (отображается в отдельном окне вашего браузера)? Может попробовать var iframe = window.opener.document.querySelector('iframe');.
@Jeto Да, это обычное всплывающее окно. Нажмите кнопку, появится всплывающее окно с некоторым содержанием и наложением на остальную часть страницы. Все происходит на странице, на которой находится посетитель, при нажатии кнопки, вызывающей всплывающее окно. Сейчас попробую.
@Jeto При реализации window.opener я получаю эту ошибку: Uncaught TypeError: Cannot read property 'document' of null. Спасибо, что нашли время помочь мне с этим, я боролся с этой проблемой в течение нескольких дней.
О, iframe находится во всплывающем окне? Пожалуйста, проверьте источник самого всплывающего окна (щелкните правой кнопкой мыши> просмотреть источник) и вставьте его куда-нибудь (например, pastebin.com)
@Jeto Да, это правильно. Я получаю источник iframe только тогда, когда просматриваю исходный код, когда открывается всплывающее окно. Вот он: [ссылка] (pastebin.com/CduJ9YJY) .Еще I он показывает только весь исходный код страницы, на которой отображается всплывающее окно, вы этого хотите?



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Добро пожаловать. Кажется, это хорошо работает (посмотрите в консоли браузера название видео).