在Facebook画布（iframe）中使用固定定位（Position:fixed）

Question

在Facebook画布（iframe）中使用固定定位（Position:fixed）

cssiframefacebook-appscss-positionfacebook-canvas

4

我们想在Facebook Canvas应用中使用一个带有position:fixed属性的锚DOM元素，并且具有流动画布大小。因为应用程序在Canvas iframe中运行，所以简单地使用css position:fixed无法正常工作：iframe内容无法看到来自周围Facebook页面的任何滚动事件。

解决这个问题的第一种方法是调用Facebook API并获取滚动位置。因此我们将其放入$(document).ready()中：

# refresh position of feedback button to simulate position:fixed in iframe
refresh_timer = 1000
move_button = () ->
  # get scroll position from facebook
  FB.Canvas.getPageInfo (info)->
    # animate button to new position with an offset of 250px
    $('#fdbk_tab').animate({top: info.scrollTop+250}, 100)
# start interval to do the refresh
setInterval(move_button, refresh_timer)

一般来说，这种方法是可行的。但是当调用Facebook API时，会导致浏览器重新加载按钮和鼠标光标闪烁，从而影响用户体验。

有没有任何改进方法或其他在iframe中实现/模拟position:fixed的方式，非常感谢您的建议！

- Nils Blum-Oeste

2

作为一种解决方法，我们切换回了固定高度的画布应用程序。这样，iframe 就有了自己的滚动条和 position:fixed 也能正常工作。但是这种方法还有一些其他小缺点。因此，我仍然希望能够解决流体高度应用程序的问题。 - Nils Blum-Oeste

我尝试使用相同的方法在我的Facebook iFrame中定位固定元素，但似乎我面临一个新问题--> 在我的开发者控制台中看到了“Uncaught SecurityError：Blocked a frame with origin "mydomain.com" from accessing a frame with origin "facebook.com"。被访问的框架将“document.domain”设置为“facebook.com”，但请求访问的框架没有这样做。两者必须将“document.domain”设置为相同的值才能允许访问。”你也遇到过这个问题吗？ - Brenda Nicole Tan

2个回答

1

仅对第一个答案的评论进行总结：Rorok_89建议的方法实际上并不适用于问题描述中所述的确切用例。它只在iframe启用溢出时才起作用。

我不知道有任何解决OP提出的问题的方法。

- Marius Seritan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rorok_89 · Accepted Answer

我怀疑这与您设置应用程序HTML布局的方式有关。我在我的测试应用程序中进行了快速测试，它可以正常工作。文档的主体只包含一个具有绝对定位的div，其中包含具有position:fixed和一些单词以便您可以看到滚动的锚点div。代码如下：

<body>
<div style="width: 300px; height: 2000px; position: absolute; top: 0; background-color: yellow;">
    <a href="www.google.com">
        <div style="width: 60px; height: 20px; background-color: #000; position: fixed; top: 20px;">
            ANCHOR
        </div>
        1words<br/>
        1words<br/>
        words<br/>
        words<br/>
        words<br/>
        words<br/>
        2words<br/><br/><br/><br/>
        2words<br/>
        words<br/>
        words<br/>
        words<br/>
        words<br/>
        words<br/>
        3words<br/><br/><br/><br/>
        3words<br/>
        words<br/>
        words<br/>
        words<br/>
        words<br/>
        words<br/>
        4words<br/><br/><br/><br/>
        4words<br/>
        words<br/>
        words<br/>
        words<br/>
        words<br/>
        words<br/>
        words<br/><br/><br/><br/>
    </a>
</div>

您可以在此处查看示例的运行情况（这里）（我刚刚删除了国家限制，如果由于任何原因您无法访问该应用程序，请告诉我，我将再次检查设置）。