Youtube訂閱——解決在彈窗內使用Youtube訂閱按鈕高度顯示不全的問題

Leyla發表於2020-11-09

背景：公司網站業務在做海外營銷網站，為了配合營銷工作，前端總要在各種地方新增各種社媒訂閱（攤手.jpg)；最近遇到的是在彈窗內展示公司的Youtube賬號的訂閱按鈕。

理想：我想使用的例子是這樣的：

 

現狀：但是當我實際使用的時候，卻只顯示了一半，如下圖：

 

 

 解決問題思路：

1. 起初，我以為是載入的外部js先執行的原因，所以將script加了defer屬性（延遲執行），發現沒有任何效果;

2. 其次，還是老老實實去查了官方文件https://developers.google.com/youtube/subscribe/reference：

官方api提供了很多功能的go/render方法，動態渲染訂閱按鈕或其他功能：

 

 

 

 3. 最後我在bootstrap彈窗載入完的鉤子函式中呼叫了gapi.ytsubscribe.render方法，實現了功能，程式碼如下：

<!--#modal-sample-lg-->

<script src="https://apis.google.com/js/platform.js"></script>
<div id="yt-button-container-render" class="g-ytsubscribe"></div>
<!--#modal-sample-lg-->

<script>
$(function() {
    var acount = 0;
    $('#modal-sample-lg').on('shown.bs.modal', function () {
        // 只載入一次，避免閃爍
        if(acount === 0) {
            var container = document.getElementById('yt-button-container-render');
            var options = {
                'channelid': 'UCv1uPumg4LFFC9qwYWKyxhw',
                'layout': 'full',
                'count': 'hidden',
            };

            gapi.ytsubscribe.render(container, options);
            acount++;
        }
    })
})
</script>

 

最後：將go實現的程式碼放到下面：

<!-- modal-sample-lg callback begin -->
<!-- #modal-sample-lg -->
<script src="https://apis.google.com/js/platform.js"></script>
<div id="yt-button-container-go"></div>
<!-- #modal-sample-lg -->
<script>
    $('#modal-sample-lg').on('shown.bs.modal', function () {
        var container = document.getElementById('yt-button-container-go');
        var div = '<div class="g-ytsubscribe" data-channelid="UCv1uPumg4LFFC9qwYWKyxhw" data-layout="full" count="hidden"></div>'
        container.innerHTML = div;
        gapi.ytsubscribe.go(container);
    })
</script>
<!-- modal-sample-lg callback end -->

 

總結：

1. 在過程中也嘗試了方法，比如說使用預設的訂閱按鈕（不滿足需求），或者說將引入的官方js放到最後，結果都沒有達到目的；

2. 究其原因，預設的訂閱按鈕是頁面載入完後就已經載入結束了，而data-layout="full"，表示高度和寬度是由內容撐開的，在初始化的時候由js動態載入的logo圖片還沒有載入到dom樹中，高度沒有被撐開，訂閱按鈕顯示不完整；

3. 想到這裡，若給訂閱按鈕最小高度，應該也是可以的（剛去驗證了一下，果然是可以的，但是必須使用px，不可以使用rem，因為訂閱按鈕是使用iframe承載的......）

4. 瀏覽器渲染機制博大精深，繼續學習~

4. 雖然Youtube訂閱國內不常用，但是記錄一下~

 

相關文章