這是在無意間發現的響應式測試的網站，可以直接在頁面上掛上不同裝置切換rwd的效果。
原官網上方按鈕 (Click or bookmark)包著一段 Javascript 的函式，可以加入瀏覽器的書簽中或是直接在控制台(console)，對目標頁面就可直接掛上。
1 | javascript:void((function(d){if(self!=top||d.getElementById('toolbar')&&d.getElementById('toolbar').getAttribute('data-resizer'))return false;d.write('<!DOCTYPE HTML><html style="opacity:0;"><head><meta charset="utf-8"/></head><body><a data-viewport="320x480" data-icon="mobile">Mobile (e.g. Apple iPhone)</a><a data-viewport="320x568" data-icon="mobile" data-version="5">Apple iPhone 5</a><a data-viewport="375×667" data-icon="mobile" data-version="7">Apple iPhone 7</a><a data-viewport="414×736" data-icon="mobile" data-version="7+">Apple iPhone 7 Plus</a><a data-viewport="600x800" data-icon="small-tablet">Small Tablet</a><a data-viewport="768x1024" data-icon="tablet">Tablet (e.g. Apple iPad 2-3rd, mini)</a><a data-viewport="1280x800" data-icon="notebook">Widescreen</a><a data-viewport="1920×1080" data-icon="tv">HDTV 1080p</a><script src=https://lab.maltewassermann.com/viewport-resizer/resizer.min.js></script></body></html>')})(document)); |
JavaScript 語法分析
1 2 | javascript:void(0) // 中最關鍵的是 void 關鍵字， void 是 JavaScript 中非常重要的關鍵字，該操作符指定要計算一個表達式但是不返回值。 |
1 2 3 4 5 6 7 8 9 | // 實例中參數 a 將返回 undefined <script type="text/javascript"> function getValue(){ var a,b,c; a = void ( b = 5, c = 7 ); document.write('a = ' + a + ' b = ' + b +' c = ' + c ); } </script> <input type="button" value="點按執行函式" onclick="getValue();" /> |
void((function(d){})(document)); 內的 (function(d){})(document) ， function(d) 的 (d) 指的是語法後的 (document) document 物件。
如果要寫成 jQuery 的物件的話可以寫成 (function(d,$){})(document,jQuery) ，同樣的 function($) 指的是語法後的 jQuery 物件。
javascript:void() 裡的 ()
將 JavaScript 製成頁面一開啟後就直接執行
1 2 3 4 5 6 7 8 9 10 11 12 | var fun_diver = '<a data-viewport="375×667" data-icon="mobile" data-version="7">Apple iPhone 7</a><a data-viewport="414×736" data-icon="mobile" data-version="7+">Apple iPhone 7 Plus</a><a data-viewport="768x1024" data-icon="tablet">Apple iPad (2-3rd, mini)</a><a data-viewport="1024x1366" data-icon="tablet">Apple iPad Pro</a><a data-viewport="1024x768" data-icon="display" data-version="17″">17″ Display</a><a data-viewport="1920×1080" data-icon="tv">HDTV 1080p</a>'; var fun_path = '<script '+'src="https://lab.maltewassermann.com/viewport-resizer/resizer.min.js">'+'</'+'script>'; var fun_inner = '<!DOCTYPE HTML><html style="opacity:1;">'+'<head><meta charset="utf-8" /></head>'+'<body>'+ fun_diver + fun_path +'</body>'+'</html>'; var func1 = function(){ void((function (d) {if(self!=top||d.getElementById('toolbar')&&d.getElementById('toolbar').getAttribute('data-resizer'))return false;d.write(fun_inner)})(document)); }; $(function(){ func1(); }); |
- void((function(d){})(document)); 將傳遞的值 document 使用 d.write() 寫入 HTML 元素架構， d 接著 document 的值寫 <!DOCTYPE HTML>入下層的 HTML 架構，比較要注意的是使用變數存起來的字串 '' 和 HTML 裡的屬性標記 ""可能讓 JavaScript 發生錯誤。
- 變數 fun_diver 可以直接去官網選擇 (點這) 要的裝置，將選裝置後的 HTML 帶進變數內取代。
- 變數 fun_path 是 d.write() 帶入的路徑，要將 HTML 的 <script> 元素中屬性值 src="" 分段寫，才不會讓 JavsScript 發生錯誤。