Question

我在弹出窗口中有一个指向网址的iframe。

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"

在弹出窗口的父窗口中打开弹出窗口中的iframe链接

1 个答案: