一、瀏覽器地址欄運行JavaScript代碼

這個很多人應該還是知道的,在瀏覽器地址欄可以直接運行JavaScript代碼,做法是以javascript:開頭後跟要執行的語句。比如:

javascript:alert('hello from address bar :)');

將以上代碼貼到瀏覽器地址欄回車後alert正常執行,一個彈窗神現。

你去試一試,是不是沒有出現彈窗???

 

那是因為:

如果是通過copy paste代碼到瀏覽器地址欄的話,
IE及Chrome會自動去掉代碼開頭的javascript:,所以需要手動添加起來才能正確執行,
而Firefox中雖然不會自動去掉,但它根本就不支持在地址欄運行JS代碼,
sigh~

二、瀏覽器地址欄運行HTML代碼

如果説上面那條小秘密知道的人還算多的話,這條秘笈知道的人就要少一些了,在非IE內核的瀏覽器地址欄可以直接運行HTML代碼!

比如在地址欄輸入以下代碼然後回車運行,會出現指定的頁面內容。

data:text/html,<h1>Hello, world!</h1>

JavaScript在瀏覽器環境實現udp通信_#前端學習

三、把瀏覽器當編輯器

還是瀏覽器地址欄上做文章,將以下代碼貼到地址欄運行後瀏覽器變成了一個原始而簡單的編輯器,與Windows自帶的notepad一樣,吼吼。

data:text/html, <html contenteditable>

JavaScript在瀏覽器環境實現udp通信_#H5_02

歸根結底多虧了HTML5中新加的contenteditable屬性,當元素指定了該屬性後,元素的內容成為可編輯狀態。

推而廣之,將以下代碼放到console執行後,整個頁面將變得可編輯,隨意踐踏吧~

document.body.contentEditable='true';

四、利用a標籤自動解析URL

很多時候我們有從一個URL中提取域名,查詢關鍵字,變量參數值等的需要,而萬萬沒想到可以讓瀏覽器方便地幫我們完成這一任務而不用我們寫正則去抓取。方法就在JS代碼裏先創建一個a標籤然後將需要解析的URL賦值給a的href屬性,然後就得到了一切我們想要的了。

var a = document.createElement('a');
 a.href = 'http://github.com/fly-sy/code';
 console.log(a.host);

五、頁面擁有ID的元素會創建全局變量

在一張HTML頁面中,所有設置了ID屬性的元素會在JavaScript的執行環境中創建對應的全局變量,這意味着document.getElementById像人的闌尾一樣顯得多餘了。但實際項目中最好老老實實該怎麼寫就怎麼寫,畢竟常規代碼出亂子的機會要小得多。

<div id="sample"></div>
<script type="text/javascript">
        console.log(sample);//直接寫id名即可獲取到元素
</script>

六、加載CDN文件時,可以省掉HTTP標識

現在很流行的CDN即從專門的服務器加載一些通用的JS和CSS文件,出於安全考慮有的CDN服務器使用HTTPS方式連接,而有的是傳統的HTTP,其實我們在使用時可以忽略掉這個,將它從URL中省去。

<script src="//cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

七、不聲明第三個變量的值交換

我們都知道交換兩個變量值的常規做法,那就是聲明一箇中間變量來暫存。但鮮有人去挑戰不聲明中間變量的情況,下面的代碼給出了這種實現。蠻有創意 的。

var a=1,b=2;a=[b,b=a][0];

JavaScript在瀏覽器環境實現udp通信_#前端學習_03

八、禁止別人以iframe加載你的頁面

下面的代碼已經不言自明瞭,沒什麼好多説的。

if (window.location != window.parent.location) window.parent.location = window.location;

九、console.table

Chrome專屬,IE繞道的console方法。可以將JavaScript關聯數組以表格形式輸出到瀏覽器console,效果很驚讚,界面很美觀。贊~贊~贊~

var data = [{'品名': ' ', '數量': 4}, {'品名': ' ', '數量': 3}];
console.table(data);

JavaScript在瀏覽器環境實現udp通信_#H5_04

JavaScript在瀏覽器環境實現udp通信_#H5_05