时间戳

首页 > 解决方案 > iframe 上的“ScrollBy”可生成无限循环的嵌入式网页

javascript - iframe 上的“ScrollBy”可生成无限循环的嵌入式网页

问题描述

在编码方面，我是一个真正的业余爱好者。我正在尝试将网页嵌入仪表板，仅使用记事本编写 HTML，获得了一些但有限的编码经验。我嵌入的网页在页面下方有固定的项目，到目前为止，我已经设法让页面跳到页面下方，停在每一篇文章处。请注意，我嵌入的网站是外部的 - 我不拥有它。我有这个 HTML 代码，其中包含一些 javascript 来使 iframe 自动成为嵌入页面的正确大小。

<html lang="en">
<head>
<meta charset="utf-8">
<title>Dashboardtest</title>
<style>

    iframe{
        width: 49%;
        border: 4px solid #CB0F0F;
    }
</style>
</head>
<body onload="pageScroll()" bgcolor="33ACFF">
   <h1 style="font-family:Pacifico">Polls... the Results are In!</h1> <iframe src="https://yearbook.com/s/polls/" height="600px" id="myIframe"></iframe>

    <script>
    // Selecting the iframe element AUTO HEIGHT CODE
    var iframe = document.getElementById("myIframe");

    // Adjusting the iframe height onload event
    iframe.onload = function(){
        iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
    }
    </script>

</body>
</html>

以前，我有这个代码：

<html>
<head>
<title>previousdashboardtest</title>
                                <meta http-equiv="refresh" content="10">


<script type="text/javascript">


<!--

function pageScroll() {


window.scrollBy(0,392);

scrolldelay = setTimeout('pageScroll()',1000); //Increase this # to slow down, decrease to speed up scrolling

        window.setInterval(function scrollWin(){
      /// call your function here
    }, 5000);

    }

//-->

</script>

</head>

<body onload="pageScroll()">


<iframe src="https://yearbook.com/s/polls/" frameborder="0" scrolling="no" marginwidth="0" marginheight="0" width="100%" 
height="45000px" style="padding: 0; margin: 0; border: 0;"></iframe>

</div>

        <script>
        function scrollWin() {
        window.scrollTo(0, 0);
        }
        </script>

</body>
</html>

它完美地向下滚动，停在页面下方的每个项目处。但是整个窗口都在滚动，这意味着我在页面上的其他文本会滚动到视野之外。因此，我将页面嵌入为 iFrame，并且只想滚动 iframe。这可能吗？还是我需要尝试其他方式。理想情况下，最后我希望它向下滚动到 iframe 的底部，然后无限期地循环回到顶部。注意：我嵌入的页面需要登录，所以如果测试最好使用其他页面。

标签： javascripthtmljs-scrollby

解决方案

推荐阅读