滚动Facebook Canvas

Cri*_*ian 3 ajax scroll facebook fbml

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

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

我注意到当你从我加载我的内容的同一个地方使用FB.ui(即创建一个要发布的流)时,它会一直滚动到顶部.所以我想也许有一个FB api要求这样做,但我找不到它.

或者也许某种方式迫使浏览器一直向上滚动,无论你是否在iframe?

有任何想法吗?

Joh*_*ika 8

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

FB.Canvas.scrollTo(0,0);
Run Code Online (Sandbox Code Playgroud)

更多信息: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>'); 
Run Code Online (Sandbox Code Playgroud)

虽然上面的技术会将窗口滚动到顶部,但我发现它没有100%可靠.例如,它似乎不适用于Facebook的新页面iframe选项卡.所以我使用这种100%可靠的技术,但不幸的是,它只会滚动到iframe的顶部:

将它放在开头标记的正下方:

<a id="top" name="top" style="display:block;height:1px;width:1px;"></a>
Run Code Online (Sandbox Code Playgroud)

以及将进行滚动的JavaScript;

     window.location.hash = 'top';
     window.location.hash = '';
Run Code Online (Sandbox Code Playgroud)