在 iframe 中保持固定位置相对于整个屏幕

Question

背景：

• 我们通过iframe在客户网站上提供应用程序
• iframe是无缝的，现在只在父div中滚动。
• 我们应用程序中的一个div具有固定位置并且应始终存在，无论滚动多少。
• 更新：我们在iframe旁部署了一个javascript脚本，因此我们可以访问托管页面

问题：当在iframe内提供时，固定位置的Div似乎不能相对于整个网页保持其固定位置。这意味着，当某人滚动时，固定的div就不再固定了。

是否有任何解决方法？

- STE

---

你能提供一个最小化、完整且可验证的应用程序示例，以便我们可以将其作为 iframe 的源吗？因为如果您尝试像 https://getbootstrap.com/examples/navbar-fixed-top/ 这样的东西进行 iframe，它会保持在顶部的位置。 - Juan Ferreras

问题是是否可能让iframe内的元素相对于整个窗口保持固定。这里有一个例子：https://jsfiddle.net/9stbu5zr/。有没有办法让内部固定元素保持在整个窗口滚动时保持相同的位置？ - gbs

Answer 1

我认为除了从外部框架动态设置onScroll的位置之外，没有其他解决方案，就像这样：

    $(() => {
      $('#contentframe').ready(() => {
        const topElem = $("#top", frames['contentframe'].document);
        const topElemTopPos = topElem.offset().top;
        $(window).on('scroll', () => {
          const scrollFromTop = $(document).scrollTop();
          topElem.css({ top: (scrollFromTop + topElemTopPos) + "px" });
        });    
      });
    });

https://codepen.io/jobe451/pen/OJWJGQX

- Daniel

Answer 2

除非您也可以访问托管页面，否则无法完成此操作。

编辑：考虑到您也可以控制托管页面，这是有可能的，但不会很容易或美观 :/。

必须通过托管页面上的fixed定位元素进行操作，目前我只能想到两种变化：

1. 将固定元素放在iframe之外。您在托管页面上的脚本可以创建它。
2. 将您的iframe分成两个部分：一个带有您想要固定的元素（使用position: fixed样式），另一个带有其他所有内容。同样，您的脚本将创建两个iframe而不是一个。

- Nick Ribal

---

感谢@elektronik。我们在iframe旁部署了一个.js脚本，因此我们也可以访问托管页面。有什么想法吗？ - STE

@STE，在托管页面中添加样式表（内联样式表或link元素，甚至是相关元素的内联样式）。如果您只需要静态样式表，则完成了！但是，如果您需要一些动态行为，则必须在托管页面和托管的iframe之间进行通信。在这种情况下，我建议使用类似iframe-resizer的东西。 - Nick Ribal

@elektronik 这个问题特别关注的是是否有可能在iframe内部保持一个元素相对于外部框架的固定位置。以下是当前行为的示例，其中内部固定元素在滚动期间仅相对于iframe而不是页面本身保持固定：https://jsfiddle.net/9stbu5zr/ - gbs