如何从 iframe 中检测父滚动事件 => 获取 iframe-position-fixed-polyfill 工作

Question

首先做一个简短的介绍来理解我的问题。

我公司内网使用限制社区系统，不允许在页面中使用javascript。您只能通过内部编辑器放置代码，保存后 javascript 将自动删除。我的解决方法是使用社区页面作为父页面并通过 iframe 加载位于共享点上的我的内容。这不是很优雅，但工作完美，没有问题，我可以使用 javascript。我问过我们的 IT 并获得了许可。

我想做什么

我想添加一个垂直菜单栏，它保持在左侧的固定位置。解决方案一是使用 html 和 css 在每个父页面中对此菜单栏进行编码。这工作正常，但如果我在菜单上有更改，我必须更新每个父页面中的代码。这很耗时，而且容易出错。

更优雅的方法是将菜单栏保存在一个单独的文件中，然后在每个页面中加载该文件。虽然父页面无法使用 javascript 我必须通过 iframe 页面加载它。

父页面内的 iframe 调用：

<iframe src="https://sharepoint.abc.com/index.aspx"></iframe>

通过iframe页面加载菜单"index.aspx":

<div id="includedMenuBar"></div>
<script src="demo/js/jquery-3.2.1.js"></script>
<script> 
    $(function(){
      $("#includedMenuBar").load("menubar.aspx"); 
    });
</script>

这很完美，但现在菜单使用的 css position: fixed; 和 top: 100px; 定位在 iframe 页面 index.aspx。如果我现在滚动父页面，菜单栏将固定到 iframe 页面但会滚动，因为 iframe 页面会随着父页面的滚动而移动。

为了解决这个问题，我尝试了 iframe-position-fixed-polyfill，效果很好，但父页面和 iframe 页面需要相同的域。但是我的父页面从公司内部网加载，而我的 iframe 页面从共享点加载。所以我需要一个跨域通信。

解决方案可以是像 PostEvent 这样的跨域事件处理程序。但是我无法在父页面上放置任何 javascript。

问题

即使我需要跨域通信并且不能在父页面中放置任何 javascript，我怎样才能让 iframe-position-fixed-polyfill 工作？

对于通过我看不到的 iframe 页面加载的固定菜单栏，也许有更简单的解决方案？

非常感谢您的帮助。

此致，迈克尔

Answer 1

天哪。保持简单应该是设备。我的解决方案对我有用。通过父页面中的另一个 iframe 加载菜单栏。通过封闭的 div.

固定此 iframe

<div style="position: fixed; top: 385px">
  <iframe src="menubar.html" style="border: currentColor; border-image: none; overflow: hidden;" width="110" height="300"></iframe>
</div>

不需要 scipt 语言。

如何从 iframe 中检测父滚动事件 => 获取 iframe-position-fixed-polyfill 工作

How to detect parent scroll event out of iframe => get iframe-position-fixed-polyfill work

html

javascript

css

iframe

css-position

我想做什么

问题