Показывать уведомление в родительском окне после закрытия модального iframe js

Question

У меня есть форма в модальном окне iframe, которое я создаю с помощью fancybox. Как только пользователь отправляет форму, после успешного завершения я хочу закрыть модальное окно и обновить div в родительском окне сообщением "Успешно сохранено".

Как мне это сделать? Я знаю, как закрыть модальное окно и обновить родительское окно в fancybox. Однако я не понимаю, как отправить сообщение "Успешно сохранено" в родительское окно и обновить div с этим сообщением, чтобы пользователь мог видеть.

Я открыт для использования любого плагина уведомлений, если это поможет.

Спасибо, Шакира

Answer 1

Во-первых, нам нужно создать функцию в родительском окне, которая позволяет нам вносить изменения. Не заключайте эту функцию в $(document).ready(function(){или $(function){.

function updateParent(msg){  
  $('#divStatusUpdate').html(msg);  
}

Теперь у нас есть функция, которая передает параметр "msg" в функцию. Функция применяет содержимое msg к div в родительском элементе с идентификатором divStatusUpdate.

Теперь у нас есть элемент, который выполняет событие для нас.

$("#element").on('click', function(){
  window.parent.updateParent('This is a message from the iFrame to the Parent Div.');
});

Просто создайте div с идентификатором divStatusUpdate, добавьте приведенный выше сценарий, измените #element на идентификатор или класс, который вы хотите использовать.

Answer 2

Если проблема заключается в изменении верхнего фрейма из iframe, вы можете создать функцию в верхнем и вызвать ее из iframe

top.yourfunction();

или же

parent.yourfunction();