Question

首先简要介绍一下我的问题。

我的公司为Intranet使用了受限制的社区系统，该系统不允许在页面中使用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页需要相同的域。但是我的父页面是从公司Intranet加载的，而iframe页面是从一个共享点加载的。所以我需要跨域通信。

解决方案可以是跨域事件处理程序，例如PostEvent。但是我无法在父页面上放置任何JavaScript。

问题

即使我需要跨域通信并且无法在父页面中放置任何JavaScript，如何获得iframe-position-fixed-polyfill的工作？

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

非常感谢您的帮助。

最好的问候，迈克尔

Answer 1

我的天哪。保持简单应该是设备。我适合我的解决方案。通过父页面中的另一个iframe加载菜单栏。通过封闭的div使其固定。

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

无需使用语言。

如何从iframe中检测父滚动事件=>获得iframe位置固定的polyfill工作

我想做什么

问题

1 个答案: