Bootstrap Affix 在 Iframe 中不起作用 [英] Bootstrap Affix not working inside an Iframe

问题描述

我有一个位于 iframe 内的页面.此页面是一个 Twitter Bootstrap 3 模板，带有带 Affix 的导航.当页面直接加载(在 iframe 之外)时，nav 和 Affix 工作正常，但在 iframe 内，nav 和 Affix 什么也不做 - 没有扩展子导航，它会滚动.

这是我的导航/词缀代码片段.

<h2>索引</h2><ul class="nav bs-docs-sidenav"><li><a href="#generalAnswers">一般常见问题解答</a><ul class="nav"><li><a href="#group_15">学徒制和实习生</a></li><a class="back-to-top" href="#top">返回顶部</a>

注意:我使用 Bootstrap 文档网站中的 CSS 来实现导航/词缀布局.

这些应该在 iframe 中工作吗?关于如何修复它的任何想法?

解决方案

您可以通过将目标修改为父窗口(iframe 之外)来使其工作:

$('#myAffix').词缀({抵消: {顶部:100，目标:window.parent}})

请注意，target 设置为 window.parent，其中发生滚动和计算.这将成功启用词缀插件.然而，还有一个问题是 position: fixed 在 iframe 中不能很好地发挥作用.我还没有找到克服这个问题的方法.

I have a page that is inside an iframe. This page is a Twitter Bootstrap 3 template with an nav with Affix. When the page is loaded directly (outside of an iframe) the nav and Affix works fine but inside the iframe the nav and Affix does nothing - there is no expanding of child navs and it scrolls away.

Here is the snippet of my code for the nav/Affix.

<div class="navbar bs-docs-sidebar hidden-xs" data-spy="affix" data-offset-top="0" data-offset-bottom="0">
    <h2>Index</h2>
    <ul class="nav bs-docs-sidenav">
        <li><a href="#generalAnswers">General FAQs</a>
            <ul class="nav">
                <li><a href="#group_15">Apprenticeships and Traineeships</a></li>
            </ul>
       </li>
    </ul>
    <a class="back-to-top" href="#top">Back to top</a>
</div>

Note: I am using the CSS from the Bootstrap docs website for the nav/Affix layout.

Should these work inside an iframe? Any ideas on how I can fix it?

解决方案

You can get this working by modifying the target to the parent window (outside the iframe):

$('#myAffix').affix({
    offset: {
        top: 100,
        target: window.parent
    }
})

Note the target is set to window.parent where the scrolling and calculations take place. This will enable the affix plugin successfully. However, there is the remaining issue that position: fixed does not play nicely in iframes. I haven't found a way to overcome this yet.

这篇关于Bootstrap Affix 在 Iframe 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！