从IFrame更改父窗口的URL

本文介绍了从IFrame更改父窗口的URL的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有两种不同的服务器上有web应用的情况，其中App1在IFrame中包含App2。 App2中的任何链接都可以具有 target =_ parent属性，这些属性允许在顶部窗口中打开这些链接。但是，我无法找到任何方式在Javascript中获得相同的行为。我找到了，其中声称子框架可以使用 parent.foo（）在父框架上调用JavaScript，但这似乎不适用于IE8或FF3.5。我发现，它解释了这种安全模型的工作原理。但似乎很奇怪，我不能用JavaScript做什么，我可以用一个简单的< a> 标签来完成。 是否有任何解决方法？我知道，但据我所知，这只适用于Firefox。

I have a situation where I have web apps on two different servers, where App1 contains App2 in an IFrame. Any links in App2 can have target="_parent" attribute, which allow those links to open in the top window. However, I can't find any way to get the same behavior in Javascript. I found this page, which claims that the child frame can call javascript on the parent frame using parent.foo(), but that doesn't seem to work in IE8 or FF3.5. I found this SO question which explains how this security model works. But it seems odd that I can't do in Javascript what I can do with a simple <a> tag. Is there any workaround to this at all? I know about window.postMessage, but (as far as I know) this only works in Firefox.

<html>
<head>
<script type="text/javascript">
function myCallback(foo) {
  alert(foo);
}
</script>
</head>
<body>
<iframe src="http://server2/test2.htm" width="400" height="150"></iframe>
</body></html>

server2 / test2.html

server2/test2.html

<html><body>
<script>
function clickit() {
  parent.document.location = "http://www.google.com"; //not allowed
  parent.myCallback("http://www.google.com"); //not allowed
}
</script>
<p>This should be in an iFrame!</p>
<p><a href="http://www.google.com" target="_parent">normal link (works)</a></p>
<p><a href="javascript:clickit()">javascript link</a></p>
</body></html>

server1 / test.html

OK I did more investigation, and it appears that postMessage works in all modern browsers, even IE (with the caveat that IE has a slightly different way of doing it). Here's how I got it to work (tested on WinXP in IE8, FF3.5, Chrome 3.0, Safari 4 beta, Opera 9.64):

<html>
<head>
<script type="text/javascript">
if(navigator.appName == "Microsoft Internet Explorer")
  window.attachEvent("onmessage", receiveMessage);
else
  window.addEventListener("message", receiveMessage, false);

function receiveMessage(e) {
  if(e.origin == "http://server2") //important for security
    if(e.data.indexOf('redirect:') == 0)
      document.location = e.data.substr(9);
}
</script>
</head>
<body>
<iframe src="http://server2/test2.htm" width="400" height="150"></iframe>
</body>
</html>

server2 / test2.htm

server2/test2.htm

<html><body>
<script>
function clickit() {
  parent.postMessage('redirect:http://www.google.com', 'http://server1');
}
</script>
<p>This should be in an iFrame!</p>
<p><a href="http://www.google.com" target="_parent">normal link</a></p>
<p><a href="javascript:clickit()">javascript link</a></p>
</body></html>

这篇关于从IFrame更改父窗口的URL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

1403页，肝出来的..

works