Открытие ссылки iframe во всплывающем окне в родительском окне всплывающего окна.

Question

У меня есть iframe для URL-адреса во всплывающем окне.

URL-адрес iframe совпадает с доменом моего приложения.

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

Я попробовал следующий код:

    $(document).ready(function (e) {
    var links = document.getElementsByTagName('a');
    for (var i = 0; i < links.length; i++) {
        links[i].setAttribute('target', '_parent');
    }
    }); 

Ссылки получают цель в качестве родителя, нокогда я нажимаю на ссылки, окно открывается в самом iframe.
Я пытался изменить цель с _parent на _top, но все еще не работает.

Любая помощь, пожалуйста?

Answer 1

Если содержимое iframe - это другой домен, тогда вы весьма ограничены в количестве выполняемых JavaScript.Вы можете узнать больше о том, почему в этом посте здесь https://www.cakemail.com/blog/the-iframe-cross-domain-policy-problem/.

Я лично нашел, что использование postMessage API - полезный обходной путь, учитывая правильный вариант использования (например, вы должны иметь возможностькод, размещенный поставщиком содержимого iframe для обработки сообщений.Который, как правило, подходит для моего варианта использования с интеграцией партнеров с другими компаниями-разработчиками программного обеспечения.

Пример такого подхода можно найти здесь: https://codepen.io/wickdninja/pen/oygwNL?editors=1111

// parent js
console.log('1 - parent');
var iframe = document.getElementById('iframe');
iframe.addEventListener("load", function(event){
  console.log('3 - parent on iframe load');
  iframe.contentWindow.postMessage('testing','*')
}, false);

iframe.contentWindow.addEventListener('message', function(event){
  console.log('recieved message event from child')
  console.log(event.data);
});

// parent html
<h1>Parent Frame</h1>
<iframe id="iframe" src="https://s.codepen.io/wickdninja/debug/GGgEKE/DqkDdKzORQXk"></iframe>

// child js
console.log('2 - child');
window.addEventListener('message', function(event){
  console.log('4 - on child message')  
  console.log('child postMessage with * origin')
}, false);

  window.parent.postMessage('test from child', '*')

// child html
<h1>Child Frame</h1>

// console output from parent 
"1 - parent"
"3 - parent on iframe load"
"recieved message event from child"
"testing"