2

我们正在为我们的服务实现 OAuth API，并将支持应用程序。

我想做的第一件事 - 允许应用 iframe 自动调整大小。

卡住。

  • 在父文档中，如果 iframe 在其他域上，我无法获取 iframe 内容的大小。
  • 我无法与 iframe 中的父文档/脚本进行交互，因为 iframe 位于其他域中。

但是Facebook以某种方式做到了？

我试图破解他们的应用程序加载流程，但没有任何成功。

他们在 iframe 中加载 page_proxy.php，然后以某种方式来自应用程序的代码进入该 iframe。

当然，他们可能只是从应用程序中获取 html 内容，然后将所有 url 路径转换为绝对路径.. 但是。那么 Ajax 调用如何工作（如果它们只是加载我们的 html 内容 - 那么任何 ajax 调用都将成为跨域调用）？但这一切都可以在 FB 上运行，就好像我的应用程序是作为真正的 iframe 加载的，并且没有任何跨域调用..！但话又说回来.. 调整大小是如何工作的，为什么我在 facebook 上看不到我的 iframe 而只看到 pageproxy？

这里真的需要一些光。

谢谢。

4

1 回答 1

3

终于找到了FB是怎么做到的：）

  • page_proxy.php#frameName - 加载一个表单，然后使用 POST 方法加载带有签名请求的 iframe。

为什么没有直接调用用应用程序加载 iframe？防止第 3 方脚本获取签名请求（其中包含所有用户信息）。

fb是如何做到的（我采用的代码）：

<form method="post" id="proxy_form"><input type="hidden" autocomplete="off" id="signed_request" name="signed_request" /></form>
<script>
  var frameName = window.location.href.split('#')[1];
  function submitForm(appTabUrl, signedRequest) {
    var proxyForm = document.getElementById("proxy_form");
    proxyForm.setAttribute("action", appTabUrl);
    proxyForm.setAttribute("target", frameName);
    var input = document.getElementById("signed_request");
    input.setAttribute("value", signedRequest);
    proxyForm.submit();
  }
  function waitForParams() {
    submitForm('$url_with_app', 'signed_request_goes_here');
  }
  waitForParams();</script>

  • iFrame 中的应用程序正常加载，但我们在 DOM 浏览器中看不到 iframe 与我们的应用程序，因为它是使用 POST 请求加载的。

  • 我们在我们的应用程序中初始化 facebook 并告诉我们的应用程序自动增长。

  • Facebook 完成初始化，等待 DOM 准备好并计算应用程序的高度。

  • 现在是时候增加我们的 iframe 了。这是他们的伎俩：

来源自FB

_sendMessageToFacebook: function(message) {
    var url = FB._domain.staticfb + 'connect/canvas_proxy.php#' +
      FB.QS.encode({method: message.method,
                    params: FB.JSON.stringify(message.params)});

     var root = FB.Content.appendHidden('');
     FB.Content.insertIframe({
       url: url,
       root: root,
       width: 1,
       height: 1,
       onload: function() {
         setTimeout(function() {
           root.parentNode.removeChild(root);
         }, 10);
       }
     });
  }

他们在我们的应用程序中加载了另一个 iframe，但该 iframe 已经属于 facebook，并且可以与 FB 父级（顶部窗口）交互并将所有必需的信息发送给父级！

于 2013-04-03T08:40:44.973 回答