1

I have an iframe to an url in a pop.

The url of the iframe is the same domain as my application.

The page of the iframe has some links which I want to open in the main window, not the pop up when a user clicks on it.

I have tried the below code:

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

The links do get the target as parent, but when I click on the links the window are opening in the iframe itself.
I tried changing the target from _parent to _top, but still not working.

Any help pls?

refresh
  • 1,319
  • 2
  • 20
  • 71

1 Answers1

0

If the iframe's content is a different domain then you are quite limited as to the amount of JavaScript execute against it. You can learn more about why in this post here https://www.cakemail.com/blog/the-iframe-cross-domain-policy-problem/.

I personally have found using the postMessage API is a useful workaround given the right use case (e.g. you must be able to have code hosted by the iframe content provider to handle the message/s). Which tends to fit my works use case with partner integrations with other software companies.

You can find an example of this approach here: 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"
wickdninja
  • 949
  • 1
  • 10
  • 15
  • I don't get your solution. Can you please explain? Both the content of the iframe and parent window are of the same domain. – refresh Feb 12 '19 at 05:06
  • Iframes are "odd" and can be difficult to work with. That why I suggest using the `postMessage` API to send a signal from the iframe out to the parent application (where JS behaves as expected) have an event listener in the parent listen for the iframes message (which in your case could contain the URL you wan to navigate to) and when the parent receives the event navigate to the URL in the message. Does that make any more sense? – wickdninja Feb 12 '19 at 05:33
  • My sample code simply demonstrates sending messages from the parent to the child and from the child to the parent. – wickdninja Feb 12 '19 at 05:34
  • Here is a similar SO question that may convey the message better than I https://stackoverflow.com/questions/2161388/calling-a-parent-window-function-from-an-iframe?noredirect=1&lq=1 – wickdninja Feb 12 '19 at 05:37
  • The issue is that I can't even collect the href of the iframes. I did get the iframe element by doing var iframe = document.getElementById('iframeTest'); But when I do var innerDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document; I am getting a document with an empty body. Any help on this? – refresh Feb 12 '19 at 05:41