首页 > 网络编程 > JavaScript > javascript技巧 > iframe父子页面滚动条

iframe父子页面实现共用滚动条的常见方法

2024-05-15 10:15:54 作者：xpsilvester

在开发过程中,有时候需要用到iframe复用不同域名下的页面内容,为了提供连贯的用户体验,经常需要在主页面（父页面）和iframe子页面之间共享滚动位置,本文将介绍其中较为常见的一种方法来实现iframe父子页面共用滚动条,需要的朋友可以参考下

引言

在开发过程中，有时候需要用到iframe复用不同域名下的页面内容。为了提供连贯的用户体验，经常需要在主页面（父页面）和iframe子页面之间共享滚动位置。当用户在父页面中滚动时，我们希望子页面的滚动条也能相应地移动到相同的位置。本文将介绍其中较为常见的一种方法，即使用postMessage来实现父子页面间的通信，从而实现滚动同步。

基本原理

1.隐藏iframe的滚动条

我们可以通过iframe属性frameborder="0"和scrolling="no"来隐藏iframe的滚动条，从而避免嵌入iframe的页面双滚动条的出现。

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

2.使用sticky粘性定位固定子页面

iframe设置了以上属性之后，子页面无法滚动，而随着父页面滚动，子页面也会跟着滚上去，不是我们想要的效果。所以需要用css的sticky粘性定位固定子页面top上升到顶部就固定。

<style>
    .container{
        width: 100%;
        min-height: 1500px;
        position: relative;
    }
    iframe{
        position: sticky;
        top: 0;
        width: 100%;
        height: 900px;
        overflow: hidden;
    }
</style>
 <div class="container">
    <iframe src="son.html" frameborder="0" scrolling="no"></iframe>
</div>

3.通过postMessage通信实现父子页面滚动联动

我们可以通过监听父页面的滚动事件，将滚动信息传给子页面，子页面通过监听父页面的postMessage事件，获取滚动信息，手动触发滚动事件，从而实现滚动联动。

父页面代码：

window.onscroll = function(){
    document.querySelector('iframe').contentWindow.postMessage({'scrollTop':window.scrollY},'*');
}

子页面代码：

window.addEventListener('message', function (event) {
    window.scrollTo(0,event.data.scrollTop);
});

完整代码

父页面：parent.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>parent</title>
</head>
<style>
    body{
        padding: 0;
        margin: 0;
    }
    .container{
        width: 100%;
        min-height: 1500px;
        position: relative;
    }
    iframe{
        position: sticky;
        top: 0;
        width: 100%;
        height: 900px;
        overflow: hidden;
    }
</style>
<body>
    <div class="container">
        <iframe src="son.html" frameborder="0" scrolling="no"></iframe>
    </div>
</body>
<script>
    // 监听message事件
    window.addEventListener('message', function(event) {
        document.querySelector('.container').style.height = event.data.message + 'px';
        document.querySelector('iframe').style.height = window.screen.availHeight + 'px';
    },false);
    
    window.onscroll = function(){
        document.querySelector('iframe').contentWindow.postMessage({'scrollTop':window.scrollY},'*');
    }
</script>
</html>

子页面：son.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>son</title>
</head>
<style>
    body{
        margin: 0;
        padding: 0;
    }
    div{
        width: 100%;
        height: 30vw;
        border-bottom:#000 solid 1px;
        background: #f5f5f5;
        line-height: 30vw;
        text-align: center;
    }
</style>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
</body>
<script>
    function sendMessage(){
        window.parent.postMessage({
            sendHeight: true,
            message: document.body.scrollHeight,
        }, '*')
    }
    sendMessage();
    window.addEventListener('message', function (event) {
        window.scrollTo(0,event.data.scrollTop);
        sendMessage();
    });
</script>
</html>

到此这篇关于iframe父子页面实现共用滚动条的常见方法的文章就介绍到这了,更多相关iframe父子页面滚动条内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！