Uncaught TypeError при публикации и получении из iframe в модальном / всплывающем / лайтбоксе

На веб-сайте 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 30.12.2018 18:47

@Jeto Спасибо. Да, это работает, и именно так я реализую сценарий на других страницах, где iframe встроен непосредственно в страницу / шаблон. Проблема в том, что я встраиваю этот iframe через плагин. Так что, когда пользователи нажимают ссылку, запускается всплывающее окно с iframe внутри. Вот когда у меня возникают проблемы и возникают эти ошибки. Похоже, что JS не может взаимодействовать со всплывающим окном плагина.

Steve Rodgers 30.12.2018 18:55

Вы уверены, что iframe загружается с правильным URL-адресом при запуске проигрывателя vimeo? Можно console.info(iframe.src) прямо перед вызовом конструктора?

Jeto 30.12.2018 19:12

@Jeto Хорошо, при этом я получаю сообщение об ошибке: Uncaught ReferenceError: iframe is not defined at <anonymous>:1:13. На панели инструментов построителя всплывающих окон у меня есть опция Insert Custom JS Variable. Я не уверен, что это значит, но если я нажму на нее, появится возможность ввести селектор и атрибут, а затем нажать «Вставить». Могу я как-нибудь это использовать?

Steve Rodgers 30.12.2018 20:21

Понятия не имею, потому что я ничего не знаю об этом конструкторе всплывающих окон. Это «традиционное» всплывающее окно (отображается в отдельном окне вашего браузера)? Может попробовать var iframe = window.opener.document.querySelector('iframe');.

Jeto 30.12.2018 21:00

@Jeto Да, это обычное всплывающее окно. Нажмите кнопку, появится всплывающее окно с некоторым содержанием и наложением на остальную часть страницы. Все происходит на странице, на которой находится посетитель, при нажатии кнопки, вызывающей всплывающее окно. Сейчас попробую.

Steve Rodgers 30.12.2018 21:10

@Jeto При реализации window.opener я получаю эту ошибку: Uncaught TypeError: Cannot read property 'document' of null. Спасибо, что нашли время помочь мне с этим, я боролся с этой проблемой в течение нескольких дней.

Steve Rodgers 30.12.2018 21:43

О, iframe находится во всплывающем окне? Пожалуйста, проверьте источник самого всплывающего окна (щелкните правой кнопкой мыши> просмотреть источник) и вставьте его куда-нибудь (например, pastebin.com)

Jeto 30.12.2018 22:02

@Jeto Да, это правильно. Я получаю источник iframe только тогда, когда просматриваю исходный код, когда открывается всплывающее окно. Вот он: [ссылка] (pastebin.com/CduJ9YJY) .Еще I он показывает только весь исходный код страницы, на которой отображается всплывающее окно, вы этого хотите?

Steve Rodgers 30.12.2018 22:28
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
9
767
0

Другие вопросы по теме