在 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

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

Standard

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

code 簡單重現如下:
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); }
}

就醬子。

[網頁] Flash ExternalInterface.call Javascript 方法,於 IE 引發「’null’ 是 null 或不是一個物件」錯誤的解法

Standard

最近這個案子,有使用到 Flash ExternalInterface.call 網頁上的 Javascript function 的動作,測試過程中,於 IE 中一直會引發下面這段錯誤訊息:

訊息: ‘null’ 是 null 或不是一個物件
行: 1
字元: 111
程式碼: 0

Continue reading

[JavaScript] ColorBox 跨越 iframe 顯示完整的黑底(overlay)

Standard

之前曾寫過一篇「[jQuery] ThickBox 跨越 iframe 顯示完整的黑底」,最近回去看了一下 thickbox 的網站,它也宣告停止繼續維護了。

它建議可改用的清單中,有個也滿好看的燈箱效果 ColorBox,最近有網友問到 ColorBox 可否也能做到跨越 iframe 顯示完整的黑底(overlay)呢?經實際測試是可以的,作法如下。

Continue reading

[AS3][JavaScript] Facebook 發佈訊息的方法

Standard

本篇延續 [AS3] Facebook 朋友列表在 Flash 中用捲軸方式呈現 這篇,一樣用 Jozef Chúťka 前輩所寫的 Facebook AS3 Graph API 作法,來發佈訊息到塗鴉牆上。(由於 Connect 時就應用程式就會要求發佈塗鴉牆的權限,因此這種方法就不會跳出任何發佈視窗喔)

此外也附加了一個以 JavaScript 方式發佈塗鴉牆的方法,這個就會跳出常見的發佈訊息小視窗囉。可以依需求搭配使用~

Facebook AS3 Connect 方法在此一樣不提,請自行參考教學連結

※ 其中要注意的是,發佈時需發佈成 Flash Player 10 版本,否則在 IE 中會無法在 connect 後正確 authorized!會一直跳出 callback.htm 頁面卻無法正確授權。為了這個問題卡很久,需特別注意。

Continue reading

[ASP.NET] 在文字框中按下 Enter 指定按下某顆送出鈕

Standard

在作專案的時候遇到的問題。當我在某文字框按下 Enter 要做送出時,卻不是送出該文字框對應的送出鈕(文字框控制項有對應的送出鈕的屬性嗎?好像沒看到…)。

網上有些作法是 Code Behind 中將該文字框加上 Enter 的 keycode 偵測,再 return false; ,使送出失效,但不是很好的作法,對使用者不是很友善哩。再找了一下,以下這種方法就能對應想要的送出鈕了。

對了,這種方法也可以通用於加上 UpdatePanel 的頁面,不會只有第一次有效。

txtSearch.Attributes.Add("onkeydown", "if (event.keyCode==13) { document.getElementById('" + btnSearch.ClientID + "').focus();return true; }")

註:txtSearch 是文字框控制項 ID,而 btnSearch 是送出鈕控制項。

出處:http://forums.asp.net/p/1121832/1757434.aspx