【问题标题】:Scrolling Facebook Canvas滚动 Facebook 画布
【发布时间】:2011-04-11 14:15:02
【问题描述】:

我正在构建一个 Facebook 应用程序。 Facebook 画布类型是 FBML,然后我将 fb:iframe 放在索引页面中,将我的 ajax 引擎加载到该 iframe 中,然后,所有内容都通过 ajax 更新。有时内容页面可能很长并且需要用户向下滚动(使用主浏览器滚动条)。但是,当您在向下滚动后单击链接并加载下一个内容页面时,滚动条仍保留在原来的位置(这是有道理的),因此您必须滚动回顶部。

我设法通过在加载数据后强制滚动来解决这个问题。它确实到达了 div 的顶部,但没有到达 facebook 栏所在的页面顶部。我尝试滚动父窗口,但由于跨站点安全限制,这是不可能的。

我注意到,当您在加载内容的同一位置使用 FB.ui(即创建要发布的流)时,它会一直滚动到顶部。所以我想也许有一个 FB api 调用可以做到这一点,但我找不到它。

或者无论您是否在 iframe 中,都可以通过某种方式强制浏览器一直向上滚动?

有什么想法吗?

【问题讨论】:

    标签: ajax facebook scroll fbml


    【解决方案1】:

    2011 年 4 月更新: Facebook 将 FB.CanvasClient.scrollTo 方法添加到他们的新 JavaScript SDK 中。你现在要做的就是:

    FB.Canvas.scrollTo(0,0);
    

    更多信息在这里:http://developers.facebook.com/docs/reference/javascript/FB.Canvas.scrollTo/


    2011 年 4 月更新:以下内容现已过时,但我将其留在这里以供参考...

    您使用的是新的 JavaScript SDK 还是旧的?使用旧的,您可以这样做:

    FB.CanvasClient.scrollTo(0,0)

    不幸的是,Facebook 不支持带有新 JavaScript API 的 scrollTo() 方法。我还没有在 FBML 应用程序中尝试过这种下一个技术,但我在 Canvas iframe 应用程序中使用它确实取得了成功(代码从这里借用:http://forum.developers.facebook.net/viewtopic.php?id=32906):

    var x = 0, y = 0;
    $("body").append('<iframe id="scrollTop" style="border:none;width:1px;height:1px;position:absolute;top:-10000px;left:-100px;" src="http://static.ak.facebook.com/xd_receiver_v0.4.php?r=1#%7B%22id%22%3A0%2C%22sc%22%3Anull%2C%22sf%22%3A%22%22%2C%22sr%22%3A2%2C%22h%22%3A%22iframeOuterServer%22%2C%22sid%22%3A%220.957%22%2C%22t%22%3A0%7D%5B0%2C%22iframeInnerClient%22%2C%22scrollTo%22%2C%7B%22x%22%3A' + x + '%2C%22y%22%3A' + y + '%7D%2Cfalse%5D" onload="$(\'#scrollTop\').remove();"></iframe>'); 
    

    虽然上述技术会将窗口滚动到顶部,但我发现它不是 100% 可靠的。例如,它似乎不适用于 Facebook 的新 Page iframe 标签。所以我采用了这种 100% 可靠的技术,但不幸的是,它只会滚动到 iframe 的顶部:

    把它放在你的开始标签下面:

    <a id="top" name="top" style="display:block;height:1px;width:1px;"></a>
    

    以及将执行滚动的 JavaScript;

         window.location.hash = 'top';
         window.location.hash = '';
    

    【讨论】:

    • 感谢您的回复!不幸的是 FB.CanvasClient.scrollTo(0,0) 不起作用,所以我想我正在使用新的 Javascript API。锚解决方案是我已经在使用的解决方案,但它只能到达 iframe 的顶部。可能有一种方法可以一直向上滚动,因为当您使用 FB.ui 创建 stream.publish 时会发生这种情况
    • 可能有办法做到这一点,但仅仅因为 Facebook 可以并不意味着他们已经向您公开了该功能。 Facebook 可以随意滚动父窗口,因为他们可以完全控制它。不幸的是,不同域中的 iframe 对父窗口没有这种控制。
    • 是的,我知道。只是想知道是否有已知的方法可以做到这一点。在网上找不到任何东西。再次感谢您的宝贵时间!
    猜你喜欢
    • 1970-01-01
    • 2011-08-26
    • 2012-01-25
    • 2010-10-27
    • 2015-12-18
    • 1970-01-01
    • 1970-01-01
    • 2017-07-03
    • 2010-10-21
    相关资源
    最近更新 更多