JavaScript

[Web][JavaScript] 有安裝 App 便開啟 App (透過 App URL scheme)，若無則導去下載 (Google Play/App Store) 的 workaround

Standard

前言

製作案件上遇到的需求，若使用者有安裝 App 便開啟 App (透過 App URL scheme)，若無則導去下載 (Google Play/App Store)。

在 App 內這件事應該是可掌控的（在自己做的 App 中攔截特定網址做處理），但在網頁上要做到這件事就有點麻煩了。一般常見的作法是擺個 Smart Banner，不過只有 iOS Safari 原生就支援，其他的得靠 jQuery Smart Banner（前陣子我也貢獻了修正 Windows Phone 相關錯誤的 pull request :P） 這類的第三方 plugin。

但 Smart Banner 和案件的需求還是有些差異，得靠其他方法解決，在實作的過程中遇到一些小問題與相應的 workaround，特此記錄。

實測環境

跟公司 QA 部門借了幾台機器，以及測試的瀏覽器分別是：

  • iPhone 5S（iOS 8.1.0） – Safari
  • LG G3（Android 5.0） – 內建瀏覽器、Chrome Android 43.0.2357.93、Facebook inapp browser（核心為 Chrome 30.0.0.0）
  • ASUS ZenFone 5 – 內建瀏覽器、Chrome Android 40.0.2214.89
  • SONY Z3（Android 5.0.2） – Chrome Android 43.0.2357.93

服用本文前請注意：也許瀏覽器版本更新後，本文的方法就失效了，所以請作為參考就好哦。

實作與問題

之前在案件中，使用下面這段程式碼作為 workaround：

setTimeout(function() {
  window.location = scheme_link;
}, 25);
window.location = download_link;

註：其中 scheme_link 是 app 的 scheme，可以是單純開啟 App，或是直接進入 App 的某一個畫面。而 download_link 是下載 App 的 URL 連結，像是 Google Play 或是 App Store 的連結。

之前實測時，在裝置上大部分情況都能如預期的運作，但仍有特殊情況（如特定版本的 Chrome、Android Stock Browser）有點小問題。

而隨著瀏覽器版本更新，這次案件再實測似乎就會出現更詭異的情況了，例如同時打開 App 與 Google Play/App Store 的連結。

於是再度至 stackoverflow.com 尋找其他解決方案，找到 一個 2014 年 8 月左右被更新的解答。

我針對該解答再做些微調後的 workground 整理說明如下：

Continue reading

在 Flask 中處理 JavaScript 裡指定 route path 的問題

Standard

目前的工作，開發團隊使用的框架是 Python 的 Flask；而身為小小前端的我在撰寫 Javascript 時，經常會遇到要在 JavaScript 中送 AJAX 到某個 route path 的實作，聽起來並不麻煩，但這個 route name 是在 Flask 中指定的，日後有可能更改，情況一多就改不完了，所以在 JavaScript 中寫死不是個好辦法。

記得之前在搭配 Rails 進行前端工作時，可以在 .js.erb 中寫 <% url = Demo::Application.routes.url_helpers %> 再用 url.某個 route name 來達成指定 route path 的目的。

可惜 Flask 好像沒有…，直接在 JavaScript 裡面寫 url_for 是沒用的（不考量更動結構，.js 依然都還是放在 static/ 目錄底下）；比較直觀的作法大概是在 template （會引入該 .js 的那支 .html 檔案）裡面加上 js 變數，再透過 url_for 指定 route path 給它：

<script>
  var path = "{{ url_for('.test') }}";
</script>

嗯，是啊，在 template 中本來就可以使用 Jinja 語法的，只是我仍覺得這個解法不大漂亮。

所以想了些繞路的作法（若熟 Flask 的朋友路過，知道怎麼解才比較漂亮的話，請不吝賜教呀～），記錄於下：

Continue reading

淺談第三方 script cache 與自動升級的作法

Standard

最近工作上遇到了「實作一段類似廣告嵌入的 JavaScript 程式碼（有點拗口，實際上就像是加入 Google Analytics 的追蹤碼那樣，動態產生 script tag，然後指定其 src 是某一段網址。），而該 script 於 server 端打了 expire max 的 cache，但又希望安裝該段 js 的網站不必更動 js 檔名（或 querystring）的原則下，能夠自動吃到最新修改版本的程式碼」的 issue，解票過程中嘗試了幾種方案，雖最後未採用此篇提到的「自動升級法」解決，不過覺得此解滿有意思的，特此記錄。

Continue reading

[Facebook][Javascript] Facebook 按讚鈕預設隱藏，而後顯示卻在 IE / Firefox 中無法顯示的解法

Standard

上週在做個活動案時，有個需求是希望使用者必須是某個 Facebook 專頁的粉絲才能進行遊戲，若尚未成為粉絲，則立即用 Lightbox 方式顯示按讚鈕讓使用者按讚，「讚」完就可以進入遊戲。

是個相當單純的需求，不過有個需要特別注意的地方：若一開始用 CSS 讓放置按讚鈕的容器（如 div）為 display: none;，而後才讓其顯示（本例是透過 jQuery 的 $(element).show()）的話，在 Internet Explorer 與 Firefox 上會無法讓按讚鈕顯示出來，而 Google Chrome 卻可以。

情況如圖：

可以在檢測元素工具中觀察到，Internet Explorer 與 Mozilla Firefox 瀏覽時，在容器被 show() 時，按讚元素的寬高仍為 0，但 Google Chrome 是正常的寬高。

翻閱了 Facebook Developer 文件中提到 FB.XFBML.parse() 方法可重新解析頁面（或指定）的元素，讓 Facebook 的外掛元件得以重新被解析一次。

果然，在主控台中手動呼叫該方法後，按讚框成功地顯示出來了！

Continue reading

jQuery Chinese Characters Length Limit Plugin 1.0

Standard

終於試著寫一個 jQuery Plugin，功能是限制 input 或 textarea 中的文字長度，同時可針對中英文做不同的字元計算，中文時算為 2 字元、英文時則算 1 字元。

使用方法：

Basic:

$(document).ready(function () {
    $('目標對象').ChineseLengthLimit();
});

Advanced:

$(document).ready(function () {
    $('目標對象').ChineseLengthLimit({
        limitCount: 11,
        isByte: true,
        callback: function (data) {
            $("#msg").html("目前輸入:" + data.input + "/" + data.max + " 還剩:" + data.left + "字元");
        }
    });
});

Continue reading

[JavaScript] ASP.NET 的 ImageButton 搭配 jQuery validate submitHandler 事件 submit 時在 IE 無法引發伺服器端事件的問題與解法

Standard

前陣子案子遇到的問題，是一個簡單的表單需求，使用 ASP.NET 作為伺服器端語言，而前端要使用 jQuery validate 做驗證再送出。
在送出前需要再做一些事件，所以使用 jQuery validate submitHandler 事件處理，最後再以 form.submit(); 送出。

code 簡單重現如下：
Continue reading

[Node.js] 使用 Node.js 來達成電腦網頁與手機網頁即時互動

Standard

這幾年 Node.js 在台灣許多網站都開始使用，我對這項技術一直頗有興趣，在想能怎麼使用這項技術去玩些有趣的互動。

曾照著網上熱心前輩所寫的文章試著寫寫看，也在去年九月參加了 HTML5與Node.js在台灣聯合技術小聚，但一時案子忙碌，實在沒有心力好好研究便停滯了。

最近公司上線的案子（1, 2）剛好能有這個機會讓我來玩玩，目的是讓使用者透過手機網頁來與電腦開啟的網頁做些即時互動。
用 App 寫要考量跨平台與門檻(還要去下載 App，應該會讓一些單純想玩玩 Event 的使用者卻步)的問題，因此便希望能都用 Web 上的技術來達成囉。

此篇便簡單紀錄一下 Node.js 在 FreeBSD 上的安裝，以及簡單製作一個手機與電腦即時互動的網頁。

自認觀念上還不是相當清楚便迫不及待分享了，若有誤之處還請前輩給予指導囉 ：）

Continue reading

iPhone/iPad 等行動裝置上的 audio 標籤無法自動播放 (autoplay) 與預載 (preload) 的問題

Standard

即將上線的 Case 花了不少時間在調校手機網頁與電腦網頁互動的工作，是使用 Nodejs 來達成，但這篇講的主題跟 Nodejs 無關，而是在製作手機版網頁時用到 audio 標籤用以播放音效所遇到的問題。

 

情況描述：Case 中有個互動效果是當使用者開啟手機版網頁後，會進行互動並播放 GIF 動畫（噢，許多舊版本的 Android 裝置是無法播放 GIF 動畫的，這點也要提一下），動畫播放過程中會播放音效。

在 Android 的內建瀏覽器中可自動播放音效，但在 Android 的 Chrome Beta 與 iPhone/iPad 上的 Safari 卻無法正常播放，一點聲音也沒有。而且在桌上型電腦上都可正常地播放。

 

為什麼呢？

Continue reading

[JavaScript] 判斷手機為直向或橫向

Standard

最近在製作手機版的 Event Site，發現許多眉眉角角的東西要不斷地調校。
iOS 也許還好，頂多就是 iPhone 跟 iPad 的差異。
但 Android 就麻煩多了，要顧及各種版本與螢幕大小。喔對了，還有不同瀏覽器的問題。

本例想利用 JavaScript 來判斷使用者的行動裝置正在使用直向或橫向瀏覽，
若非我們預設的瀏覽方向，需秀出警語或遮罩。

當然也可以選擇 CSS 的方式來製作，可以搜尋 “orientation css” 這樣的關鍵字，可以找到許多做法。
但有時候還是需要 JavaScript 的事件來控制一些流程。

以下是在

  • SAMSUNG I9100 (Android 4.0.3): 內建瀏覽器、海豚瀏覽器 8.0.0、Chrome Beta 0.18.4409.2396、Opera Mobile 12.00.ADR-1203051631
  • Sony XPERIA S: 內建瀏覽器
  • HTC ONE X: 內建瀏覽器
  • SonyEricsson Xperia Arc S: 內建瀏覽器
  • Apple iPhone 3GS 內建瀏覽器(Safari)
  • Apple iPhone 4S 內建瀏覽器(Safari)
  • Apple iPad2: 內建瀏覽器(Safari)

測試過 OK。

以下是 Code:
Continue reading

在 IE9 中 ExternalInterface.call 無法作用的解決方法

Standard

由於要在網頁中呼叫 Flash 裡面用 ExternalInterface.addCallback 加入的事件，
除了 HTML 中Flash 物件加入時要設定 id & name，還有 allowScriptAccess params 使其允許、AS 中也要加入 flash.system.Security.allowDomain(sourceDomain) 外，
在不同瀏覽器上也會因為 js 抓取 flash 物件的方式不同而要個別判斷。

Calling a custom FLASH method from IE7 & IE8 – stackOverflow 提供了一個方法，可通用於 IE, Chrome, Firefox:

 function thisMovie(movieName) {
     return document[movieName] || window[movieName];
 }

然後如果要 call Flash 中的 function 的話可以這樣寫:

function callExtFunction(g){
    var flash = thisMovie('flash物件的id&name');
    if (flash) { flash.flashFunction名稱(g); }
}

就醬子。