將臉書影音、訊息iframe嵌入網站時,在手機下可自動縮放(響應式可用)

梅問題-將臉書影音、訊息、照片iframe嵌入網站時,在手機模式時自動縮放(響應式可用)
  現在社群的平台愈來愈多,身為社群龍頭的臉書,也不斷的推層出新,來吸引更多人加入以及提升使用者的黏著度,同時臉書更提供許多與網站整合的服務,像是可以將臉書中的影音、訊息、照片,以iframe的方式,嵌入自己的網站中,如此一來就能讓網站與社群更緊密的整合在一起。
  但最近好友衛大,則遇到一個問題,就是將臉書中的影音或訊息iframe嵌到網站中裡,在手機版下,不是區塊超出就是內容被裁掉,讓梅干研究好了一陣子後,才發現到單純改變iframe的寬度是無效的,由於臉書的iframe的網址中,還會帶入顯示範圍的寬度值,因此單純CSS是無法解決的,得再透過javascript來動態調整,所以就請好友男丁的協助下,終於解決了此問題,讓臉書的iframe在手機版下,可自動的縮放顯示範圍,如此一來就不會再發生跑版,或內容被卡掉的問題,因此有遇到此問題的朋友,現在也一塊來看看吧!
Step1
可看到在iframe中的src路徑裡也有一個width,而這一個width是用來控制內容的顯示範圍,而iframe中的width屬性是用來控制區塊大小,因此iframe的width可用css來控制,但iframe src的路徑就得用javascript來作調整。
梅問題-將臉書影音、訊息、照片iframe嵌入網站時,在手機模式時自動縮放
Step2
接著分別只需將css與javascript,加到網站中,當視窗小於480時,就會自動縮放。
css:
@media (max-width: 480px) {
    iframe[src *= "facebook"]{
        max-width:360px;
        height: 197px;
    }
}

javascript:
var w = 350;
var _w = $(window).width();
$(function(){
if(_w <= 480){
var ifrs = document.getElementsByTagName('iframe');
for(var i=0;i<ifrs.length;i++){
var ifr = ifrs[i];
var a = ifr.src;
if(a.indexOf('https://www.facebook.com/') == -1) continue;
var b = a.indexOf('&width=');
var c = a.substring(0, b + 7);
var d = c + w;
ifr.src = d;
ifr.width = w;
}
}
});

Step3
這時在手機中,就會看到,無論是iframe中的內容,還是iframe的區塊,就會依照目前裝的大小,自動縮小就不會有超出跑版的問題啦!
梅問題-將臉書影音、訊息、照片iframe嵌入網站時,在手機模式時自動縮放

相關文章

Facebook Message臉書訊息網頁版,暗藏了許多經典的小遊戲

Facebook Message臉書訊息網頁版,暗藏了許多經典的小遊戲

臉書Facebook現在也可直播電腦畫面

臉書Facebook現在也可直播電腦畫面

社群必備!Facebook「粉絲團留言抽籤小助手」線上幫你抽出得獎名單

社群必備!Facebook「粉絲團留言抽籤小助手」線上幫你抽出得獎名單

Facebook Messenger新功能:可變換聊天色彩與按讚圖示

Facebook Messenger新功能:可變換聊天色彩與按讚圖示

關閉Facebook電腦版桌面通知

關閉Facebook電腦版桌面通知





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 1 梅留言

  • 第1梅
    肉肉 說道:

    Wow~~只能說每次梅干大寫的文章都是時下現正運用的技術,描述起來也不會覺得困難,更容易上手,讓看得懂程式的人更了解其運用,讓不懂程式的人輕鬆去運用程式,也把程式變成一件趣事呢~~~~

    回應:
    感謝啦!!!