Выход из iframe с исходной страницы для отображения модального окна на родительской (верхней) странице

Я пытаюсь заставить модальное окно выходить из моего iframe на верхнюю страницу, когда пользователь щелкает изображение в iframe, которое будет отображать видео на главной (родительской) странице. У меня есть следующее, но я не уверен, как реализовать JavaScript для перемещения модального окна со страницы iframe на верхнюю страницу.

Это код iframe, который перейдет на родительскую страницу:

<iframe id="rtv-preview-frame" src="syndicateplayer.html" name="preview-frame" frameborder="0" noresize="noresize"></iframe>

Я пытаюсь выяснить, что мне нужно иметь на моей странице syndicateplayer.html, чтобы переместить содержимое модального окна на верхнюю страницу в виде модального окна сверху. Оглядываясь на некоторые варианты, похоже, мне нужно что-то подобное на странице, которая находится в iframe:

var $jParent = window.parent.jQuery;
var dlg1 = $jParent('.rtv-video');
dlg1.dialog();

Я пробовал это, но не смог заставить div выйти из iframe при нажатии. Какие-либо предложения?

iframe jquery framebusting

12.01.2015

возможно, это поможет: stackoverflow.com/questions/3381920/, попробуйте выполнить поиск в следующий раз 12.01.2015
Взгляните на этот вопрос. Второй ответ. Вы можете разрешить полноэкранный режим в iframe. stackoverflow.com /вопросы/17417517/ 12.01.2015
@DaniëlTulp - я искал, но этого не было в моих запросах. 12.01.2015
@MaxBaldwin, проблема не в полноэкранном режиме, а в том, как переместить div из содержимого iframe на родительскую страницу. 12.01.2015
@Matt, это невозможно из соображений безопасности браузера. iframe не может взаимодействовать ни с чем за его пределами. Ваши единственные варианты — полноэкранный режим с прозрачным фоном, или вы можете попытаться запустить событие вне iframe с помощью почтового сообщения. Если что-то происходит в iframe, отправьте почтовое сообщение родительскому окну, сообщая ему, что нужно инициировать событие на основе полученного почтового сообщения. developer.mozilla.org/en-US/docs/Web/ API/Window.postMessage 12.01.2015

Ответы:

Я нашел решение использовать https://www.ericmmartin.com/projects/simplemodal/ и используя это, чтобы передать модальное окно родительскому элементу из iframe: открыть модальное окно из iframe в родитель

12.01.2015

Новые материалы

Объяснение документов 02: BERT

BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..

Как проанализировать работу вашего классификатора?

Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..

Работа с цепями Маркова, часть 4 (Машинное обучение)

Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]

Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..

Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter

Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..

Учебные заметки: создание моего первого пакета Node.js

Это мои обучающие заметки, когда я научился создавать свой самый первый пакет Node.js, распространяемый через npm. Оглавление Глоссарий I. Новый пакет 1.1 советы по инициализации..

Забудьте о Matplotlib: улучшите визуализацию данных с помощью умопомрачительных функций Seaborn!

Примечание. Эта запись в блоге предполагает базовое знакомство с Python и концепциями анализа данных. Привет, энтузиасты данных! Добро пожаловать в мой блог, где я расскажу о невероятных..

Метки

Machine Learning JavaScript Data Science Artificial Intelligence Software Development Python Web Development Coding Deep Learning AI React Software Engineering Nodejs Java Front End Development Typescript Computer Science Data Algorithms Development NLP Tech Programming Languages CSS ChatGPT HTML Python Programming Javascript Tips Angular Computer Vision Startup Data Visualization Neural Networks Tutorial Statistics Productivity Reactjs Learning