Как очистить содержимое iFrame от другого iFrame

У меня есть wrapperPage.html с <iframe class="header" а также <iframe class="pageBody", В header есть ссылка, <a class="clearLink", который при нажатии должен очистить содержимое pageBody,

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

Пожалуйста, обратите внимание, что, header а также pageBody каждый загружается из разных включенных файлов.

wrapperPage.html

<div class=non-floater>
    <iframe class="header" src="header.html"></iframe>
    <iframe class="pageBody" src="pageBody.html" /> 
</div>

header.html:

<script type="text/javascript">
    $(document).ready(function() {
        $(".clearLink").on("click", function() {
            $('.pageBody').contents().find("body").html('');
        });
    });
</script>

<a class="clearLink" href="#">Navigation Button</a>

pageBody.html:

<div class="panel-body">This is the body</div>
Источник

2 ответа

Решение

Попробуйте использовать канал сообщений

wrapperPage.html

<body>
<div class=non-floater>
    <iframe class="header" src="header.html"></iframe>
    <iframe class="pageBody" src="pageBody.html" /> 
</div>
<script>
  var channel = new MessageChannel();
  var header = $(".header")[0].contentWindow;
  var pageBody = $(".pageBody")[0].contentWindow;
  header.onload = function() {
    this.postMessage("","*", [channel.port2])
  };

  channel.port1.onmessage = function(e) {
    if (e.data === "clicked") {
      $(pageBody.document.body).html("")
    }
  }
</script>
</body>

header.html

<body>
<a class="clearLink" href="#">Navigation Button</a>
<script>
  var port;

  onmessage = function(e) {
    port = e.ports[0];
  }

  $(".clearLink").on("click", function(e) {
      port.postMessage("clicked");
  });
</script>
</body>
Источник

Вы можете получить ссылку на главное окно из iFrame следующим образом: Window.Parent ссылка

Затем вы можете назначить событие для перехвата триггера или функции в главном окне (или только в другом iFrame) для управления им.

Например:

  • Напишите функцию в pageBody.html, связанную с пользовательским событием.
  • Получить ссылку на окно из функции щелчка в вашем header.html IFRAME.
  • Поиск целевого элемента, которому назначено ваше пользовательское событие.
  • Огонь событие

Я надеюсь, что это поможет вам.

Источник
Другие вопросы по тегам