Question

我有一个页面，当滚动条移动并且背景随滚动条移动时，导航栏（标题）不变。同时，体内文本隐藏在导航栏下方。背景对于导航栏和文本都很常见。我想要做的是，我想将“静态容器”中的文本转移到iframe。是否可以同时使用iframe和主页的滚动条？在我发布的小提琴中，只有应用文本的垂直滚动条。我可以获得整页（单滚动条）吗？

JSFIDDLE

//code $(document).ready(function() {
    $(".content").scroll(function() {
       $("body").css("background-position", "0 -" + $(this).scrollTop() + "px");
    }); });

Answer 1

我不确切知道你需要什么，但我有一个线索。如果我是正确的，您想将div static-container更改为iframe。一些简单的部分。如果我仍然正确，如果iframe的内容滚动，它应该实际滚动主页？

有一种或两种方法可以做到这一点：

您需要知道加载到iframe中的网页的内容高度，并相应地调整iframe。
填写内容div中的iframe。
隐藏iframe中的滚动条，但以某种方式检测滚动。然而，这将是一项艰巨的任务，通往此的道路将充满坑洼。

我将为选项1和2提供解决方案。

首先将div重新设置为iframe。

//HTML
    <iframe onload="detectIframeCompletion()" src="/" id="static_container" class="static-container" frameborder=0 seamless="true" sandbox="allow-same-origin" style="width:100%;height:auto">

无缝允许iFrame具有透明背景，随文档一起流动。沙盒，因此您可以使用来自同一可信来源的页面。请记住，您无法进行跨域调用。这将导致访问被拒绝。

FOR OPTION 1

其次，您需要编码以检测页面何时完成加载。

function detectIframeCompletion()
{
    var elementIframe = document.getElementById("static_container");
    //Now access the iframe document via: contentDocument > documentElement (HTML-tag) > scrollHeight
    document.getElementById("static_container").style.height = elementIframe.contentDocument.documentElement.scrollHeight + "px";

}

此外，我真的需要强调的是，此解决方案仅适用于静态内容。当iframe页面的内容发生变化时，iframe的高度需要同等调整。

FOR OPTION 2

请忽略选项1中的所有JavaScript。只需将此CSS添加到CSS中即可。

.content {
    top:65px;
    overflow: hidden;
    bottom: 0px;
    width: 100%;
    position: fixed;
}

.content > iframe {
    height: 100%;
    width : 100%;
}

当iframe的内容溢出时，这只会向iframe添加一个滚动条。

结论

当您需要在iframe下添加内容并且只需要一个滚动条时，请使用选项1。当所有内容都加载到iframe中时，请使用选项2。

这个答案最重要的经验教训：

Seamless（或旧版 allowtransparency ）使用文档制作 iframe 流程
使用sandbox启用要访问的内容（来自同一来源）。
在 HTML5 （ CSS 或通过 JavaScript ）中定义CSS变量时，请始终添加单位。即px。

SIDE注意：只有支持HTML5的浏览器才能正确执行此操作。对于专业：IE9 +，Firefox和Chrome。

Answer 2

您只需要使iFrame自动调整大小即可。为此，您可以使用this JQuery插件根据内容高度动态调整iframe的大小。

1。从here

下载

2。在网页上包括jQuery库和jQuery iframe自动高度

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.iframe-auto-height.plugin.js"></script>

3。创建一个iFrame，然后制作scrolling=no

<iframe src="photo.html" class="photo" scrolling="no" frameborder="0"></iframe>

4。调用插件，然后完成

<script>
  $('iframe.photo').iframeAutoHeight({
  minHeight: 240, // Sets the iframe height to this value if the calculated value is less
  heightOffset: 50 // Optionally add some buffer to the bottom
  });
</script>

发现于 https://www.jqueryscript.net/layout/jQuery-Plugin-For-Auto-Resizing-iFrame-iframe-Auto-Height.html

如何同时滚动iframe和父页面？

2 个答案:

FOR OPTION 1

FOR OPTION 2

结论