iframe父子頁面實現(xiàn)共用滾動條的常見方法

更新時間：2024年05月15日 10:15:54 作者：xpsilvester

在開發(fā)過程中,有時候需要用到iframe復用不同域名下的頁面內容,為了提供連貫的用戶體驗,經常需要在主頁面（父頁面）和iframe子頁面之間共享滾動位置,本文將介紹其中較為常見的一種方法來實現(xiàn)iframe父子頁面共用滾動條,需要的朋友可以參考下

引言

在開發(fā)過程中，有時候需要用到iframe復用不同域名下的頁面內容。為了提供連貫的用戶體驗，經常需要在主頁面（父頁面）和iframe子頁面之間共享滾動位置。當用戶在父頁面中滾動時，我們希望子頁面的滾動條也能相應地移動到相同的位置。本文將介紹其中較為常見的一種方法，即使用postMessage來實現(xiàn)父子頁面間的通信，從而實現(xiàn)滾動同步。

基本原理

1.隱藏iframe的滾動條

我們可以通過iframe屬性frameborder="0"和scrolling="no"來隱藏iframe的滾動條，從而避免嵌入iframe的頁面雙滾動條的出現(xiàn)。

<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通信實現(xiàn)父子頁面滾動聯(lián)動

我們可以通過監(jiān)聽父頁面的滾動事件，將滾動信息傳給子頁面，子頁面通過監(jiān)聽父頁面的postMessage事件，獲取滾動信息，手動觸發(fā)滾動事件，從而實現(xiàn)滾動聯(lián)動。

父頁面代碼：

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>
    // 監(jiān)聽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父子頁面實現(xiàn)共用滾動條的常見方法的文章就介紹到這了,更多相關iframe父子頁面滾動條內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: