快捷導(dǎo)航

iframe父子頁(yè)面實(shí)現(xiàn)共用滾動(dòng)條的常見方法

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

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

引言

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

基本原理

1.隱藏iframe的滾動(dòng)條

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

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

2.使用sticky粘性定位固定子頁(yè)面

iframe設(shè)置了以上屬性之后，子頁(yè)面無(wú)法滾動(dòng)，而隨著父頁(yè)面滾動(dòng)，子頁(yè)面也會(huì)跟著滾上去，不是我們想要的效果。所以需要用css的sticky粘性定位固定子頁(yè)面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.通過(guò)postMessage通信實(shí)現(xiàn)父子頁(yè)面滾動(dòng)聯(lián)動(dòng)

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

父頁(yè)面代碼：

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

子頁(yè)面代碼：

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

完整代碼

父頁(yè)面：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>

子頁(yè)面：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>

到此這篇關(guān)于iframe父子頁(yè)面實(shí)現(xiàn)共用滾動(dòng)條的常見方法的文章就介紹到這了,更多相關(guān)iframe父子頁(yè)面滾動(dòng)條內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: