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

问题描述 投票:0回答:2

我有一个页面,其中滚动条移动且背景与滚动条一起移动,而navbar(header)不变。同时,正文中的文本隐藏在导航栏下方。背景对于导航栏和文本都是通用的。我想做的是,我想将“静态容器”中的文本移至iframe。是否可以同时使用iframe和首页的滚动条?在我张贴的小提琴中,只有适用于文本的垂直滚动条。我可以整个页面获取它吗(单滚动条)?

JSFIDDLE

//code $(document).ready(function() {
    $(".content").scroll(function() {
       $("body").css("background-position", "0 -" + $(this).scrollTop() + "px");
    }); });
javascript jquery html css html5
2个回答
2
投票

我不知道您到底需要什么,但是我有一个线索。如果我是正确的,您想将div static-container更改为iframe。一些简单的部分。如果我还是正确的话,如果iframe的内容滚动了,它实际上应该滚动主页吗?

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

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

我将为选项12提供解决方案。

首先将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具有透明背景,并随文档一起流动。沙箱,因此您可以使用来自相同可信来源的页面。请记住,您不能进行跨域调用。这将导致拒绝访问

选项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的高度进行均等的调整。

选项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变量时(CSS或通过JavaScript定义)总是添加单位。即px

注意:只有启用HTML5的浏览器才能正确执行此操作。对于专业:IE9 +,Firefox和Chrome。


0
投票

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

1。从here下载

2。在网页上包含jQuery库和jQuery iframe Auto Height

<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

© www.soinside.com 2019 - 2024. All rights reserved.