在FBML的語法中,fb:profile-pic標籤提供顯示使用者大頭照功能,詳細的屬性設定可以參考SDK。而我所遇到的問題是: 點擊顯示出來的大頭照連結後,原先所期望的是導向這個使用者的個人頁面,但卻會將本頁導向至空白頁面。會發生這個問題可能和採取iframe顯示模式有關。其實我所希望的是能夠再另外一個視窗或tab,顯示出使用者的個人頁面。然而觀察下圖的html內容,a的標籤內並沒設定target='_target',因此這個動作只能由我們自己來做處理。
在使用fb:profile-pic的標籤後,會透過FB.XFBML.parse將這個節點parse一遍,而API會將對應的超連結與顯示圖片html內容給insert進去。
FacebookUtillity.parseXFBML = function(domID){ FB.XFBML.parse($("#" + domID)[0]); };
一開始是在呼叫FacebookUtillity.parseXFBML後,再將insert target='_blank'給insert到a的標籤內。但FB.XFBML.parse似乎是非同步的function,因此我改透過它所提供的callback function,並透過JQuery API去尋訪圖片超連結標籤。我們只要透過下面的方式,就可以順利將target='_blank'的屬性帶給大頭照的連結。
FacebookUtillity.parseXFBML = function(domID){ FB.XFBML.parse($("#" + domID)[0], function(){ $("#" + domID).find('a[class="fb_link"]').attr('target','_blank'); }); };
透過這個方式,我還可以將發佈至塗鴉牆的功能bind到頭像上。
在2012年9月之後,常常發現_blank並沒有被append到link中。FB.XFBML.parse並不如文件所說的,會等element產生後才呼叫callback function。為了解決這個問題,我改透過setTimeout的方式去呼叫原本要做的事情。
這也是偶然發現的問題!
留言
張貼留言