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

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

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

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

解決問題思路：

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

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

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

3. 最后我在bootstrap彈窗加載完的鉤子函數(shù)中調(diào)用了gapi.ytsubscribe.render方法，實現(xiàn)了功能，代碼如下：

<!--#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實現(xiàn)的代碼放到下面：

<!-- 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. 究其原因，默認的訂閱按鈕是頁面加載完后就已經(jīng)加載結束了，而data-layout="full"，表示高度和寬度是由內(nèi)容撐開的，在初始化的時候由js動態(tài)加載的logo圖片還沒有加載到dom樹中，高度沒有被撐開，訂閱按鈕顯示不完整；

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

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

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