当父级不在同一域中时，关闭该 iframe 中的 iframe

发布于 2024-12-22 02:13:09 字数 897 浏览 2 评论 0原文

我有一个 Facebook 画布应用程序作为顶部设置栏。我添加了一个“喜欢”按钮，用于打开一个 IFrame，其中包含喜欢该应用程序的用户以及喜欢/不喜欢该应用程序的选项。我向该 iframe 添加了一个按钮，单击该按钮会关闭该 iframe。

所以在 iframe html 里面我有：

function closeIFrame() {
    window.parent.closeLikeIframe();
}

我创建的按钮执行这个函数。

在父页面内我有以下代码：

function closeLikeIframe() {
    var iframe = document.getElementById('likeIframe');
    iframe.style.display = "none";
}

所以在 Firefox 中它工作得很好，但在其他浏览器中则不然。我可以看到一个 javascript 错误，

unsafe JavaScript attempt to access frame with URL http://X from frame with URL http://Y. Domains, protocols and ports must match.
user_like.html:15Uncaught TypeError: Property 'closeLikeIframe' of object [object DOMWindow] is not a function

它找不到函数 closeLikeIframe 因为主页位于 facebook 上，而 IFrame 本身位于我的服务器上，所以我不允许访问。

关于如何正确打开和关闭该 IFrame 有什么想法吗？

谢谢

原文

I have a facebook canvas application that as a top setup bar. I added a like button that opens an IFrame that contains the users who liked the application with an option to like/unlike the application. i added a button to that iframe that's suppose to close that iframe when clicked.

so inside the iframe html i have:

function closeIFrame() {
    window.parent.closeLikeIframe();
}

the button that I created execute this function.

inside the parent page I have the following code:

function closeLikeIframe() {
    var iframe = document.getElementById('likeIframe');
    iframe.style.display = "none";
}

so in Firefox it works great, but it doesn't in other browsers. I can a javascript error

unsafe JavaScript attempt to access frame with URL http://X from frame with URL http://Y. Domains, protocols and ports must match.
user_like.html:15Uncaught TypeError: Property 'closeLikeIframe' of object [object DOMWindow] is not a function

it doesn't find the function closeLikeIframe because the main page sits on facebook while the IFrame itself sits on my servers so i doesn't allow the access.

any ideas on how to properly open and close that IFrame ?

thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

绝不服输 2024-12-29 02:13:09

有一个通用的解决方法，有点 hacky，涉及将另一个 iframe 放入第一个 iframe 中：

+------------------------------------------------+
| A: Main page on FB                             |
|                                                |
|    +---------------------------------------+   |
|    | B: Iframe (page on your server)       |   |
|    |                                       |   |
|    |    +--------------------------------+ |   |
|    |    | C: Another iframe, page on FB  | |   |
|    |    |                                | |   |
|    |    +--------------------------------+ |   |
|    +---------------------------------------+   |
+------------------------------------------------+

A 和 C 可以通信，因为它们来自同一域。

C 仅包含一个小脚本，用于侦听 URL 参数并调用 A 中的方法。B

使用适当的 URL 参数设置 C 的 src 属性。

编辑：这篇文章用真实的图表和一切解释得更好！

There's a general workaround which is a bit hacky, and involves putting another iframe inside the first one:

+------------------------------------------------+
| A: Main page on FB                             |
|                                                |
|    +---------------------------------------+   |
|    | B: Iframe (page on your server)       |   |
|    |                                       |   |
|    |    +--------------------------------+ |   |
|    |    | C: Another iframe, page on FB  | |   |
|    |    |                                | |   |
|    |    +--------------------------------+ |   |
|    +---------------------------------------+   |
+------------------------------------------------+

A and C can communicate because they are from the same domain.

C just contains a small script which listens for URL parameters and calls methods in A.

B sets the src attribute of C with the appropriate URL parameters.

Edit: This post explains it even better, with a real diagram and everything!

回复收藏 0 原文

~没有更多了~