# JavaScript - browser zoom detect 強者我朋友身為一個設計師問我一個很奇耙的需求
就是可不可以知道瀏覽器的縮放狀態
因為她的 BOSS 要求縮放不破版, 所以她希望設計在縮放狀態時的 layout 讓工程師套版
於是來問我說是否有辦法知道瀏覽器的縮放狀態
先說一下其實要縮放不破版只要設計彈性的 layout 例如使用 grid 的設計基本上都不會破版, 以我的經驗縮放破版通常是一些特殊的 layout 或用一些奇特的 CSS 的寫法
但正妹設計師求助
魯蛇工程師只好默默的來看看有啥方法
在新的 JavaScript api 有個 devicePixelRatio 可以取得目前 device 的像素比
一般是用來判斷是否是 high resolution 的螢幕
但是當 browser 縮放時其實這個值也會改變(尚未在 mobile device 試驗
所以可以用這特性來做處理
但這有問題就是當本身螢幕就是 high resolution 得螢幕像是 2K or 4K or MBPR 的螢幕
它們的 window.devicePixelRatio 就不會是 1
所以縮放後也不好知道縮放的比例
所以非完美解…
且目前 browser 支援度不佳
下面是範例
var browserZoomLevel = Math.
...
Category: JavaScript
# Firebase - Firebase Cloud Message(FCM) Research Log This article is focus on web version
## Intro You can easy to use web notification push notification to your web site.
Set Up a JavaScript Firebase Cloud Messaging Client App
## Different with use pure web notification Using the Notifications API
Browser support FCM - Chrome(desktop & Android) & Firefox(desktop & Android) pure notification api - Chrome(desktop & Android) & Firefox(desktop & Android) & Opera(desktop) & Safari(desktop) Android need service worker Service Worker FCM - require pure notification api - option pure web notification only a notification object, you need handle connection push message from server.
...
# JavaScript - get text from dom object not include wrap html tag in child ## Intro ### Case 1 <div id="case_1"> Hi, This is a <em>Apple</em> </div> I want to get Hi, This is a ### Case 2 <div id="case_2"> <p>I have a pen.</p>PPAP </div> I want to get PPAP
### Case 3 <div id="case_3"> Apple<span> and pen</span> and pineapple pen </div> I want to get Apple and and pineapple pen
...
# JavaScript - touch and click behavior in mobile browser On mobile web
If you click it
And mobile browser can fire touchstart and click
Fire touchstart event and then fire click event has the difference in time.
the step is touchstart -> click
So if you has a popup and you use touchstart event bind close behavior.
You can find it fire click event.
Then some bug happened.
...
# JavaScript - 動作行為抽象化實例 其實標題真的不知道要怎麼定
因為只是要說明一個實例, 但又不想扯到其他太制式的東西(設計模式), 但這範例又可用於其他地方, 所以到最後就用了個似是而非的標題了…
先說一下可能的使用情境
當你在做一個動作時要做一件事 ex: 呼叫 API、紀錄 GA、狀態改變之類的事情
sample code
document.querySelector('a').addEventListener('click', function () { // GA or call API or do somethong }); 以紀錄 GA 為例
但是如果是紀錄 GA 點擊事件就會有許多區域要記錄點擊來瞭解使用者點哪個區域較多, 就要在不同區域綁定不同的 GA 但日子一久或程式變大的情況要找哪有綁 GA 就很不好找, 所以這時就需要有個 interface 來統整這事情
document.querySelector('#item').addEventListener('click', function () { // GA or call API or do somethong interfaceGa(this); }); document.querySelector('#banner').addEventListener('click', function () { // GA or call API or do somethong interfaceGa(this); }); function interfaceGa(argument) { var name = argument.
...
# JavaScript - facebook save to facebook button 2016 F8
Facebook release new function - save to facebook
Then we can use it now
## Step 1 Go to facebook developer Save Button - Social Plugins - Documentation - Facebook for Developers
## Step 2 Build or use facebook application
If you had facebook application can skip this step
If you build facebook application and you can get this code
...
# JavaScript - DOM object check array & isArray polyfill One day my colleague find a question.
ECMA script isArray is not work when object is DOM element
Array.isArray(document.querySelectorAll('div')); // false And polyfill for old browser
Object.prototype.toString.call(arg) === '[object Array]'; Still fail
Object.prototype.toString.call(document.getElementsByClassName('product-img')); // [object HTMLCollection] Object.prototype.toString.call(document.querySelectorAll('div')); // [object NodeList] So i try to make a polyfill
Array.isArray = function(arg) { var type = Object.prototype.toString.call(arg); if (type === '[object Array]' || type === '[object HTMLCollection]' || type === '[object NodeList]') { return true; } return false; };
...
# JavaScript - get CSS style Sometimes i want to use JavaScript get dom CSS style.
Use DOM.currentStyle and window.getComputedStyle(DOM)
For IE use DOM.currentStyle
Other use window.getComputedStyle(DOM)
var dom = document.getElementById("target"), style = dom.currentStyle || window.getComputedStyle(dom); console.log(style.marginTop); refer - Window.getComputedStyle() - Web APIs | MDN
refer - currentStyle object (Internet Explorer)
...
# Something about XSS(Cross-site scripting) If not set anything
Use like
<?php echo $_GET['name'];?> and querystring name = <script>alert(document.cookie)</script>
And not defence XSS
In Firefox
In Chrome
In Safari
## Result Chrome & Safari browser has handle XSS default
## Defence Set header X-XSS-Protection: 1
if use PHP, can use
htmlspecialchars() // or htmlentities() ## Important! Finally
We must know it is handle encode to avoid run JavaScript on page
...
# JavaScript - Get some value about form input type and select ## Select <select id="select_data"> <option value="1">test1</option> <option value="2" selected="selected">test2</option> <option value="3">test3</option> </select> var e = document.getElementById('select_data'); var strUser = e.options[e.selectedIndex].value; If want to set selected
var e = document.getElementById('select_data'); e.querySelectorAll('option')[2].selected = true; Get change option
document.querySelector('#select_data').addEventListener('change', function (e) { var _this = this.options[this.selectedIndex]; }); ## radio <div class="row"> <p class="col">device</p> <div class="row col s12 m2"> <input name="group1" type="radio" id="device_water_1" value="1" checked /> <label for="device_water_1">True</label> </div> <div class="row col s12 m2"> <input name="group1" type="radio" id="device_water_2" value="2" /> <label for="device_water_2">False</label> </div> </div> // for IE9 up var val = document.
...