facebook下,让iframe自适应content

1. 修改Widnows系统配置文件   

    在c:/windows/system32/drivers/etc/hosts, 增加一行(增加一个域名 www.abc.com)
    125.39.164.102    www.abc.com

    说明:由于facebook目前要求"Canvas Callback URL"必须是域名的方式,而我手上目前没有域名,在调试期只有先模拟一个了。如果你有域名就不用这步了。

2.修改facebook中的项目配置
  (1)修改"Canvas Callback URL"地址
      油画  -->  Required URLs , 修改Canvas Callback URL为: http://www.abc.com:7070/myApp/

  (2)修改"IFrame Size"
      油画  --> Canvas Settings,  修改IFrame Size 为 Resizable
   
   注意,一定要确认修改成功! 我在修改时,就因为其它项报错,导致修改"IFrame Size"没有成功,但在页面上却显示修改完成了。白白浪费了一天多时间


3.在页面的Body体内增加如下代码:
  <div id="FB_HiddenIFrameContainer" style="display:none; position:absolute; left:-100px; top:-100px; width:0px; height: 200px;"></div>
  <script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
  <script type="text/javascript">
     FB_RequireFeatures(["CanvasUtil"], function(){
     FB.XdComm.Server.init("/xd_receiver.htm?v=2");
     FB.CanvasClient.setSizeToContent();
   });
  </script>


4.代理访问的问题
  (1)我使用的是火狐的FoxyProxy代理, 在FoxyProxy中新建了一个模板,并且将www.abc.com加入黑名单(黑名单中的URL将不走代理)
  (2)将Foxproxy设置为“使用基本其预定义模板的代理服务器”

  如果你使用其它代理,将www.abc.com设为不走代理即可

5.facebook中对应的文档
  http://wiki.developers.facebook.com/index.php/Resizable_IFrame

你可能感兴趣的:(function,iframe,服务器,url,callback,Facebook)