[Javascript] HTML to CSV – Charset UTF-8 BOM – 完美匯出CSV

使用情境 Javascript在匯出EXCEL有ASCII Code瓶頸不能完美支援,所以匯出CSV是較佳的選擇。 CSV匯出的亮點會在於Charset,例如支援中文而使用BOM。 技術亮點 var csvContent = “欄位A,欄位B\n值A,值B”; var link = window.document.createElement(“a”); link.setAttribute(“href”, “data:text/csv;charset=utf-8,%EF%BB%BF” + encodeURI(csvContent)); link.setAttribute(“download”, “upload_data.csv”); link.click(); 其中Link格式,使用UTF-8 with BOM: “data:text/csv;charset=utf-8,%EF%BB%BF” + encodeURI(csvContent) JSFiddle

[Javascript] HTML固定頭部擋到表單錨點 – HTML5 input required is blocked by Fixed Header/Navbar

問題情境 在做 HTML5 input required 送出檢查時,網頁錨點捲動是以物件做TOP定位點,可能會被 Fixed Header/Navbar 擋到。 解決方法 使用scrollIntoView override方法: var elements = document.querySelectorAll(‘input,select,textarea’); for (var i = elements.length; i–;) { elements[i].addEventListener(‘invalid’, function () { this.scrollIntoView(false); }); } jsfiddle

[CSS] RWD文繞圖方法 – Response Image Float

使用情境 多行文字中,圖片align或float置左或右的文繞圖方是很常見,進入RWD模式後小寬度時照樣文繞圖並不妥。 解決方法 用CSS的media來生效或取消圖片float吧: /* Response Image Float */ @media only screen and (max-width : 599px) { .img-float-left, .img-float-right { float: none; } } @media only screen and (min-width : 600px) { .img-float-left { float: left; } .img-float-right { float: […]

[JavaScript][GA] Google analytics – 兩組帳號、多帳號並存一網站 (通用分析)

看以下Code即可: <script> (function(i,s,o,g,r,a,m){i[‘GoogleAnalyticsObject’]=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,’script’,’//www.google-analytics.com/analytics.js’,’ga’); ga(‘create’, ‘UA-12345678-1’, ‘auto’); //建立第一個帳號 ga(‘create’, ‘UA-87654321-2’, ‘auto’, ‘secondGA’}); //建立第二個帳號 ga(‘require’, ‘displayfeatures’); //啟用客層和興趣報表 ga(‘send’, ‘pageview’); //送出第一個帳號PV ga(‘secondGA.send’,’pageview’); //送出第二個帳號PV </script> Refer:https://developers.google.com/analytics/devguides/collection/analyticsjs/creating-trackers

[jQuery] AJAX跨網域 | AJAX Cross Domain Request withCredentials (Access-Control-Allow-Origin)

做個AJAX跨網域可是容易忘記細節的,這就來篇Note, 後端部分,Server Header請開啟(以PHP動態Header為例): header(“Access-Control-Allow-Origin: *”); header(“Access-Control-Allow-Credentials: true”); Cookie夾帶 如需夾帶Cookie則前端的AJAX需開啟Credentials,JQuery為例: $.ajax({ xhrFields: { withCredentials: true }, type: “GET”, url: “http://www.example.org/ajax.php” }).done(function (data) { console.log(data); }); xhrFields中withCredentials要開啟,這就是亮點!

[JS][jQuery] AJAX Cross Domain Request – CORS | AJAX跨網域應用

Intro 跨來源資源共享(英語:Cross-origin resource sharing,縮寫:CORS),用於讓網頁的受限資源能夠被其他域名的頁面存取的一種機制。 跨來源資源共享標準描述了,新的HTTP頭部在瀏覽器有權限的時候,應該以如何的形式傳送請求到遠端URLs。雖然伺服器會有一些校驗和認證,但是瀏覽器有責任去支援這些頭部以及增加相關的限制。 實作 做個AJAX跨網域可是容易忘記細節的,這就來篇Note, 後端部分,Server Header請開啟(以PHP動態Header為例): header("Access-Control-Allow-Origin: *"); header("Access-Control-Allow-Credentials: true"); 若要包含跨域請求的認證資訊 (如 cookies),則前端 Ajax call 得設定 withCredentials 屬性,JQuery為例: $.ajax({ xhrFields: { withCredentials: true }, type: "GET", url: "http://www.example.org/ajax.php" }).done(function (data) { console.log(data); }); References jQuery.ajax() | jQuery […]