iframe 中的 Window.scroll答案

【问题标题】：Window.scroll within an iframeiframe 中的 Window.scroll
【发布时间】：2018-05-12 05:36:59
【问题描述】：

我搜索了，但找不到任何东西。

在页面上向下滚动后，我有一个粘性标题显示在页面上。这在页面上工作得很好。但是，不幸的是，我现在不得不将它放在 iframe 中。

我必须使用完全相同的代码，但我相信是 window.scroll 导致它跳闸。内容只是位于所有内容后面的页面顶部，当检查代码时，它会在该函数处停止，不再继续。

window.scroll（或滚动功能）是否有替代品，或者有没有办法让它在 iframe 中工作？我所有的尝试都失败了。

我的例子在这里https://www.bootply.com/edHiY15iJy#

我的标题 HTML

<div class="container">
        <header class="header-wrapper">
            <div class="sticky-header">
                <div class="row">
                        <div class="col-md-4">
                        <div class="form-group">
                            <label class="bold">Customer Name: </label>
                            <label>Person!! </label>
                        </div>
                        <div class="form-group">
                            <label class="bold">Address: </label>
                            <label>101 Main Street </label>
                        </div>

                    </div>

                    <div class="col-md-4">
                        <div class="form-group">
                            <label class="bold">Email:</label>
                            <label>something@email.com </label>
                        </div>
                        <div class="form-group">
                            <label class="bold">City, State:</label>
                            <label>Tavierner, FL </label>
                        </div>

                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label class="bold">Phone:</label>
                            <label>555-555-5555 </label>
                        </div>

                        <div class="form-group">
                            <label class="bold">Club Code:</label>
                            <label>456 </label>
                            <label class="bold">Associate#:</label>
                            <label>45 </label>
                        </div>
                    </div>
                </div>
            </div>
        </header>
  <section>
    <p>this</p><p>this</p><p>this</p><p>this</p><p>this</p>
    <p>this</p><p>this</p><p>this</p><p>this</p><p>this</p>
    <p>this</p><p>this</p><p>this</p><p>this</p><p>this</p>
    <p>this</p><p>this</p><p>this</p><p>this</p><p>this</p>
    <p>this</p><p>this</p><p>this</p><p>this</p><p>this</p>
    <p>this</p><p>this</p><p>this</p><p>this</p><p>this</p>
    <p>this</p><p>this</p><p>this</p><p>this</p><p>this</p>
    <p>this</p><p>this</p><p>this</p><p>this</p><p>this</p>
    <p>this</p><p>this</p><p>this</p><p>this</p><p>this</p>
    <p>this</p><p>this</p><p>this</p><p>this</p><p>this</p>
    <p>this</p><p>this</p><p>this</p><p>this</p><p>this</p>
    <p>this</p><p>this</p><p>this</p><p>this</p><p>this</p>
    <p>this</p><p>this</p><p>this</p><p>this</p><p>this</p>

  </section>
</div>

还有我的 jquery

 if ($('.sticky-header').length >= 1) {
        $(window).scroll(function () {
            var header = $(document).scrollTop();
            var headerHeight = $('.header-wrapper').height();
            if (header > headerHeight) {
                $('.sticky-header').addClass('sticky');
                $('.sticky-header').fadeIn();
            } else {
                $('.sticky-header').removeClass('sticky');
            }
        });
    }

菜单不工作时的屏幕截图：

【问题讨论】：

您的 iframe 有定义的高度和宽度？
@LeandroRuel，高度和宽度为 100%。它填满了整个屏幕，这是我无法改变的。它是整个应用程序的一部分
你能发布一些错误的截图吗？我需要了解您的问题
另外，您尝试了 document.scroll 而不是 window.scroll ？看这个问题：stackoverflow.com/questions/1852518/…
@LeandroRuel 我放了一个错误的截图，它就在页面上所有元素的后面。我试过document.scroll。该问题用于滚动到顶部，例如“让我向上”按钮，或者您单击一个元素并且页面滚动。我的情况是我需要检测页面何时滚动然后显示div

标签： jquery html iframe

【解决方案1】：

我会发表评论，但我还没有获得足够的声誉。（对不起）我在 SO 上找到了this。由于您正在尝试检测 iframe 内的滚动事件，因此天际线的答案应该会有所帮助。

【讨论】：

这是最好的方法，因为 iframe 就像一个窗口中的另一个窗口。
很遗憾，我无法让该帖子中的任何一个解决方案发挥作用。它只是无法识别滚动。
既然卡在了window.scroll，看来是iframe的“引用”问题吧？你试过window.frameElement吗？我没有在帖子或 cmets 中看到，如果您尝试过。或者您是否尝试过通过 id 引用它？
@Geshode 我试过window.frameElement，调用iframe id，做iframeId.contents()，调用文档，附加到html，只是附加到窗口，调用父iframe 的....你的名字我试过叫它。
我猜，那你也试过getFrameTargetElement( document.getElementById("ID") )吧？如果您尝试了所有这些，那么呼叫可能不是问题。您是否尝试过 .scroll 的不同变体？例如速记版本.on("scroll", function(){...})。我认为这不会解决问题，但谁知道呢。

【解决方案2】：

我撕开你的引导程序，加载所有库以便工作并将其添加到 iframe 中，它工作正常。尝试它只是为了确保它是导致错误的脚本，而不是加载 iframe 的页面。

【讨论】：

没有错误，脚本只是拒绝进入滚动功能。我已经在几个干净的环境中加载了它，但也无法让它在那里工作......我希望我知道你是如何让你工作的。

【解决方案3】：

这里的问题是滚动适用于哪里。

如果滚动应用于文档，JS在该文档中，并且iframe有滚动，那么它应该像jQuery doc一样工作：see the last demo here。

也许尝试用演示替换 iframe 的内容，看看它是否有效。

一个直接可能的解决方案是让滚动回到页面中，只需在其中创建一些父元素（或使用现有的），其宽度和高度为 iframe 大小加上溢出，并使用一个

$('#myparent').scroll(function () {

而不是针对文档。请注意，当 JS 执行此行时，您需要存在 #myparent，因此请考虑使用 .ready 或将 JS 放在页面底部。

最后，如果您想要没有滚动的解决方案，您可以尝试使用 this post here 或 this one maybe more like it 之类的一些纯 CSS 解决方案（完全不同的解决方案）。但不确定 iframe 是否也会在那里引起问题。

编辑：因为完整的 css 是不行的，所以我能想到另外两个解决方法。

1- 鼠标滚轮事件。

在 Chrome 上，尝试将 .scroll(... 替换为 .on('mousewheel',... 如果可行，您可以使用this plugin here 进行跨浏览器解决方案。

2- 坏的和肮脏的

嗯，我的最后一颗子弹不是最好的。您可以检测 iframe 页面上的滚动事件（例如，让 iframe 一直到文档底部，并检测 iframe 窗口的滚动）。然后，您可以从这里在 iframe 页面中进行工作，例如：

$('#myiframe').ready(function () {
  $(window).scroll(function () {      
        var header = $(document).scrollTop();
        var headerHeight = $('#myiframe').contents().find('.header-wrapper').height();
        var sticky = $('#myiframe').contents().find('.sticky-header');
        if (header > headerHeight) {
            sticky.addClass('sticky');
            sticky.fadeIn();
        } else {
            sticky.removeClass('sticky');
        }
  });
});

我测试了它，如果你只是替换#myiframe，它应该可以工作。但正如我所说，它不是那么干净（不确定你的团队会怎么想^^'）。

【讨论】：

我实际上已经尝试将滚动附加到页面上的第一个 div。我还尝试将它附加到 iframe 的 id 以及 iframe 的内容。我正试图找到滚动功能的替代方案，因为它不想在这种情况下工作。
您是否尝试用 jQuery doc 中的演示替换您的页面？如果是并且它不起作用，您能否发布此尝试的完整代码（iframe+demo），它会更容易调试。如果是并且它有效，如果通过输入 alert('1'); 你能在你的实际代码中看到吗？ if ($('.sticky-header').length >= 1) { 和 alert('2'); 之前在你有任何结果之后？
我无法发布整个应用程序代码。我在一家公司工作，不能公开发布他们的内部应用程序。是的，我尝试从那里放入示例，但代码忽略了滚动功能，就像我尝试过的任何其他时间一样。我总是用 console.logs 进行测试，以确保它可以进入功能。在这种情况下它不能。这就是为什么我正在寻找滚动功能的替代品。
酷，这意味着问题来自 iframe 的页面。如果将 .scroll 事件替换为 .click 事件，它会起作用吗？我知道您不能发布任何公司代码，但是里面是否恰好有 JS？有没有 preventdefault ？还是任何 .contentWindow （让 iframe 页面访问被调用页面）？最后，至于替代方案，我将在我的答案中编辑一个。
点击、悬停和几乎所有其他功能都有效（除了 mousemove）。这就是让我如此难过的原因。没有preventdefaults，但我确实添加了一个只是为了看看它是否改变了任何东西而它没有。 js挺多的，但都没有直接接触到这个页面。

【解决方案4】：

我的解决方案是：对整个页面使用一个包装器，你也可以使用body标签，放入以下css：

<style>
 html,
 body {
   height: 100%;
 }
 body {
   overflow-y: scroll;
 }
</style>

并在你的 js 中测试它：

<script>
  $('body').on('scroll', function() {
  // your code goes here...
  console.log('scroll being made');
  })
</script>

【讨论】：

【解决方案5】：

检查您的示例中呈现的代码 (https://www.bootply.com/edHiY15iJy#)，它位于“iFrame”中。我认为您缺少的是内部 iframe 代码中的“css 代码”。

【讨论】：

这只是我提供的 bootply，没有对其进行任何更改.... css 在 iframe 中
但是使用您提供的代码可以很好地呈现。对吧？
你正确使用 iframe 吗？示例："
是的，我正在正确使用 iframe。这是一个专门使用 iframe 来使用内容的广泛应用程序。
也许您缺少其他头脚本？

【解决方案6】：

试试这个代码来获取 iframe 内的滚动偏移：

$(document).ready(function()
{   

    $('#yourFrameId').load(function()
    {

        var iframe = $(this).get(0);
        iframe.contentWindow.onscroll = function(evt)
        {
            console.log(evt.pageY);
        };


    });


});

【讨论】：