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

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

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

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

解決問(wèn)題思路：

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

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

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

3. 最后我在bootstrap彈窗加載完的鉤子函數(shù)中調(diào)用了gapi.ytsubscribe.render方法，實(shí)現(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實(shí)現(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 -->

總結(jié)：

1. 在過(guò)程中也嘗試了方法，比如說(shuō)使用默認(rèn)的訂閱按鈕（不滿足需求），或者說(shuō)將引入的官方j(luò)s放到最后，結(jié)果都沒(méi)有達(dá)到目的；

2. 究其原因，默認(rèn)的訂閱按鈕是頁(yè)面加載完后就已經(jīng)加載結(jié)束了，而data-layout="full"，表示高度和寬度是由內(nèi)容撐開(kāi)的，在初始化的時(shí)候由js動(dòng)態(tài)加載的logo圖片還沒(méi)有加載到dom樹(shù)中，高度沒(méi)有被撐開(kāi)，訂閱按鈕顯示不完整；

3. 想到這里，若給訂閱按鈕最小高度，應(yīng)該也是可以的（剛?cè)ヲ?yàn)證了一下，果然是可以的，但是必須使用px，不可以使用rem，因?yàn)橛嗛啺粹o是使用iframe承載的......）

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

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