上一次掃出來的時候已經修正過了，這次加了一些功能後又出現，下圖是安全掃描報告，看到 _ga, _gid 之類的很快就知道是使用 Google 分析 (Google Analytics) 造成的。

要修正這個嚴重性被標示為「中」的問題很簡單，只要到載入及初始化 Google 分析的部份，例如小蛙找到其中一個頁面 Google 分析的載入有這段

ga('create', 'UA-xxxxxxxx-x', 'auto');

這時候要用到 Google 分析提供的 cookieFlags，把上述設定改成

ga('create', 'UA-xxxxxxxx-x', {'cookieFlags': 'SameSite=None; Secure'});

就可以囉 ~ 更多 cookieFlags 的設定可參考：Google Analytics设置cookieFlags – GA 小站analytics.html，F12 看看設定前跟設定後的差別。

打完收工～！再次送掃！站上還有其他不錯的 技巧分享 喔～

這篇文章 加密的階段作業 (SSL) Cookie 中遺漏安全屬性 最早出現於 記下來。

PHP 壓縮檔案

這邊是留給自己的 ZipArchive 用法的 memo，確定載入此模組後，只要使用以下方法就可以輕鬆把檔案壓縮成 zip

// 建立 ZipArchive 物件
$zip = new ZipArchive();
// 在指定路徑中建立一個 zip 檔
$res = $zip->open('tmp_callback/123.zip', ZipArchive::CREATE);
// 把 tmp_callback/file1 新增至 zip 內，並改名為 00000001.txt
$zip->addFile('tmp_callback/file1', '00000001.txt');
// 關閉 zip 物件
$zip->close();

透過網頁下載 zip 檔

透過以下的語法可以讓瀏覽器直接下載 zip 檔，一方面在之前做權限控管以及避免洩漏檔案真實路徑

$path = "/var/www/html/uploads/";
$filename = '03082358.zip';
	
header("Pragma: public");
header("Expires: 0");
header("Cache-Control: must-revalidate, post-check=0, pre-check=0");
header("Cache-Control: public");
header("Content-Description: File Transfer");
header("Content-type: application/octet-stream");
header("Content-Disposition: attachment; filename=\"".$filename."\"");
header("Content-Transfer-Encoding: binary");
header("Content-Length: " . filesize($path . $filename));
@readfile($file);

無法開啟壓縮檔的原因

直到有使用者反應壓縮檔無法開啟，透過 unzip-online.com 線上解壓縮也失敗

使用 notepad++ 開啟後才發現 zip 檔開頭有三行空白，可是有些電腦可以正常開啟有些電腦卻不行

只要把那三行空白刪除，就可以正常解壓縮了 …

無法開啟壓縮檔的解決方法

一開始以為是 ZipArchive 模組的問題，做了各種嘗試後發現，產出來的 zip 是正常的，並沒有上面那三行空白，那問題就是出在下載這段了。

試了很多方法發現只要有<?php include_once "xxx.php" ?>就會有三行空白的狀況，一開始笨笨的試著把所有用到的 include 都拔進來放，後來覺得這樣實在是又累又蠢，最後終於找到簡單解法 … 只要在readfile之前呼叫ob_clean();就可以避免這個問題 …

// 以上省略
ob_clean();
@readfile($file);

這篇文章 無法開啟 PHP ZipArchive 下載的 zip 檔 最早出現於 記下來。

text-indent 文字縮排

小蛙無設定縮排的文字（由左至右、上至下排列），樣式如下

報章雜誌上常可見首行縮排兩個字的排版

使用 text-indent: 2em; 即可輕鬆達成首行縮排兩個字，也可以透過 px 或其他單位進行調整

<style>
.indent-2{
  text-indent: 2em;
}
</style>

<h3>首行縮排二字</h3>
<div class="indent-2">現在雲端儲存服務眾星雲集，例如：Google 雲端硬碟、Apple iCloud、Microsoft OneDrive、Dropbox、Box … 等，在共同編輯及使用的情況下，版本管理就非常重要了，這篇文章把 Google 雲端硬碟檔案版本管理的方法記下來。</div>

text-indent 還能做什麼

小蛙一開始遇到 text-indent 是因為要做出下面這種排版

這個例子有 5 個字（包含一個全形：），我們先把 2em 改成 5em，剛剛我們設定 text-indent: 2em; 是首行往右邊縮 2 個字，那這個需求的理解是不是照理推改成 text-indent: -5em; 就可以變成往左邊的了？

結果是 … 最左邊的字超出畫面，嗯，既然提到邊界，css 有一個左邊邊界的屬性 margin-left，加入 margin-left: 5em; 看看能不能把凸出去的內容再擠回來

效果看起來的確是我們要的了，統整使用到的 css，只要把 text-indent 擠出去的位移，再用 margin-left 推回來，不管後面幾行要縮排多少，都可以自己調整囉！

<style>
.indent-title-5{
  text-indent: -5em;
  margin-left: 5em;
}
</style>

<div class="indent-title-5">文章摘要：現在雲端儲存服務眾星雲集，例如：Google 雲端硬碟、Apple iCloud、Microsoft OneDrive、Dropbox、Box … 等，在共同編輯及使用的情況下，版本管理就非常重要了，這篇文章把 Google 雲端硬碟檔案版本管理的方法記下來。</div>

CSS 相關文章：

1. CSS 段落文字縮排、凸排 (text-indent)

這篇文章 CSS 段落文字縮排、凸排 (text-indent) 最早出現於 記下來。

平常瀏覽網頁的時候也會遇到，當送出表單後，點選「上一頁」常可以看到文件已過期，或是重新傳送這些資料才可以正確顯示之類的錯誤訊息，記得以前會看到ERR_CACHE_MISS錯誤的字樣，小蛙這次遇到的只有顯示如下圖

小蛙接手處理的這個系統則是原本點選上一頁沒有問題，經過資安掃描修正後發生的，Google 及跟處理過該狀況的同事討論過之後找到相同的答案，如果在 header 中加入Cache-Control: private的設定，就可以解決掉這個問題！

PHP

// 在 session_start(); 後加入
header("Cache-Control:private");

JSP

response.setHeader("Cache-Control", "private");

參考資料：

• Chrome浏览器对于POST页面执行history.back返回或表单数据丢失的解决办法
  (連結失效 https://www.unixso.com/Php/post-header.html)
• ERR_CACHE_MISS 搜尋回上一頁空白或錯誤
• ERR_CACHE_MISS 上一页提示确认重新提交表单

這篇文章 Post 後上一頁 history.back() 發生文件已到期/認重新提交表單 ERR_CACHE_MISS 最早出現於 記下來。

Cloudflare 之前有介紹過是一套非常強大的免費 CDN，算起來也很佛心，免費版本已經提供非常多好用的功能了，今天小蛙要再來講它裡面有一個叫做 Apps 的功能。

登入 Cloudflare 之後，進入要管理的 Site 之後，上方選單中的最右邊的 Apps，進去之後搜尋 Share 就可以看到 AddToAny Share Buttons 的 App 可以安裝

小蛙安裝過了有點懶得刪掉再重新設定一次，下面拿另一個套件的畫面來放，點選 Preview on your site

進入下一個畫面之後會看到切割成左右兩邊，右邊是網站的預覽，左邊是一些設定

Buttons type 是設定你要浮動 Floating 或是固定在某處 Inline，Vertical bar 跟 Horizontal bar 分別是垂直的跟水平的，因為電腦版頁面比較寬，因此適合垂直放在最邊邊，當然還是要視每個人狀況而定，一般手機板左右比較窄，因此設計成分享按鈕為水平的，這邊小蛙的設定是電腦版的時候，在網站左側垂直浮動，在手機版的時候則變成底部中央浮動。

接著是按鈕設定，顏色可以選擇預設的或是自訂，下面分別是按鈕大小、圓角程度、按鈕間距、跟按鈕離底部的距離等設定，把下面的 Show sharing options 打勾進行按鈕類別的設定。

如果 Service 下拉沒有看到自己要的服務，可以點選 AddToAny service code 那行藍字，過去找自己要的服務，點進去之後可以看到 code 是什麼，照著填上來就可以了，像這邊小蛙去查了 Line 的 code 是 line，Service 選 Other … 然後 Service code 填入 line 就會出現 Line 的分享按鈕了。

最後下面留一個 Service: AddToAny 的話，就會出現一個 + 符號，目的是如果使用者沒有找到自己要的分享工具，可以透過這個 + 點進去找，最後一行如果留空白，會自動把當前頁面分享出去。

所有步驟完成之後，點選左下角的 Install on all pages，就會安裝在網站上每個頁面的左側。

什麼？你照著設定了還是沒有？那很有可能是你的網站只是透過 Cloudflare 代管，但是並沒有使用 Cloudflare 的 CDN 服務喔！來打開它吧！

最上方選單，點選 DNS 選單

點選紅框部份，變成橘色就表示目前該網址服務有通過 CDN，有通過 CDN 的服務 Cloudflare 才有辦法幫忙加上你所安裝上去的 Apps 喔！

不過還是有點小小的問題，小蛙還不知道怎麼處理，不過沒有什麼太大的影響，想說就先放著，就是 … 它連後台也加上了，變成這個分享按鈕會擋到自己的選單 …

Cloudflare 系列文章：

• Cloudflare – 超強大的免費 CDN (?)
• 使用 Cloudflare 代管你的域名
• 使用 Cloudflare AddToAny Share Buttons 來分享你的網站

這篇文章 使用 Cloudflare AddToAny Share Buttons 來分享你的網站 最早出現於 記下來。

目的

WordPress 本身提供了一個基本搜尋框，有點像 Google 一樣，單一搜尋框就可以搜尋任何你想要搜尋的字，簡單明瞭，但是有些情況下希望可以讓使用者作更多方面的搜尋，例如：在某些文章中加入特定屬性，搜尋的時候可以透過這些屬性來進行二次過濾。這樣講可能有點籠統，這邊舉一個實際的例子來運用。

假設現在有一個旅遊景點的網站，小蛙可能會希望除了景點之外還能做其他搜尋，像搜尋臺北，理所當然列出了所有包含「臺北」的內容，但有些時候使用者希望限縮搜尋條件「臺北市裡面的汐止區跟北投區」的結果，或是條件可以自己換「臺北市的名勝古蹟或海水浴場」 … 等，透過兩個外掛的合作就可以做到這件事情。

安裝所需外掛

Toolset Types 外掛

點我開啟外掛連結。

這個外掛小蛙是最近才發現的，他非常方便，可以額外透過 taxonomy 的方式，附加更多屬性(or 分類)到文章上，他還有很多其他功能，但小蛙在這邊只有用到分類的部份，如上面的例子，小蛙想要在「分類」的部份加入臺北市，然後透過 Toolset Types 往下細分臺北市/新北市的各區。

安裝好外掛後，點選 Toolset -> 分類

小蛙新增了一個新的分類叫做地點，新增的時候會有很多選項，除非有特殊需求或是看得懂設定的意思，不然小蛙是直接用預設

新增完之後可以發現，文章的選單下面多了一個「地點」的選項

進入「地點」選項之後可以開始建立自己要增加的選項

建立好地點之後，便可以開始寫文章了，文章的版面也同樣此時出現了「地點」的選項，如此一來就可以讓文章有「臺北市的分類」又可以有「南港的地點(taxonomy)」

到這邊前置作業就完成了，接下來開始設定 Search 部份。

Search & Filter 外掛

點我開啟外掛連結。點我開啟教學文件。

Search & Filter 是一個非常強大的外掛，有免費版本跟付費版本，小蛙這邊只會使用到免費功能，他可以直接透過 shortcode 的方式在自己想要的地方插入搜尋功能，而且這個搜尋功能不只是基本的搜尋框，可以在搜尋框上附加上其他屬性，例如文章類型、文章分類、taxonomy … 等，這些都是 WordPress 預設沒有的，立馬開始吧！

基本語法大概是長這樣

[searchandfilter fields="search,category,post_tag"]

fields 是要產生搜尋的類型，search 是基本搜尋框、category 是分類，post_tag 是文章標籤，這邊可以看到更多其他可用欄位，都是以一段 shortcode 配上一張結果圖片的方式來介紹用法。

還可以將下拉選單 (select) 換成單選 (radio) 或是多選 (checkbox)，真的是一個非常方便且實用的外掛。除非有特殊需求，不然 Search & Filter 的基本功能就已經非常強大了。

測試的方式可以直接把 shortcode 放進文章裡，或者也可以從外觀 -> 小工具 -> 自訂 HTML

[searchandfilter fields="search,category,place"  types=",select,checkbox" headings=",分類,地區" operators=",,or" show_count=",1,1"]

小蛙需要搜尋框、分類(顯示縣市的)以及 place taxonomy(顯示地區的)，分別是用輸入框、下拉選單、跟多選框來呈現，並切加入分類、地區等標籤，重點是後面這個 operators，這個讓你可以選擇要用 and 或是 or 運算，這個的差別在於如果小蛙選擇了「臺北市」，而地區部份為多選，當使用 and 的情況下，選了「信義」跟「南港」就必須有一個地點同時是信義也同時是南港，才會被搜尋出來，這樣子就不太符合小蛙需求，因為不會有一個地方同時在南港，又同時在信義，這時候就必須多一個 operators 來設定成 or，如此一來輸出條件就變成，符合臺北市信義區或是臺北市南港區的景點，這樣才符合小蛙的需求。而 show_count 就是要不要顯示文章數量，1 是顯示 0 是不顯示。

基本上到這邊應該都能正常運作了，不過小蛙收到的需求是希望可以把多選框改成類似標籤 (tag) 的方式呈現。在剛剛的自訂 HTML 小工具中修改一下內容，看看成果，Search & Filter + Toolset Types 真的是非常方便！

WordPress 5.0 系列：

• WordPress 升級 5.0
• WordPress 5.0 區塊基本使用
• WordPress 5.0 相關問題
• 強化 WordPress 搜尋功能 – Search & Filter + Toolset Types
• WordPress 利用鉤子(Hooks)清除頁面快取

這篇文章 強化 WordPress 搜尋功能 – Search & Filter + Toolset Types 最早出現於 記下來。

Placemat

網址連結：https://placem.at/ (連結已失效)

Placemat 主要提供三個類別的圖片，分別是

以人物為主體的圖片：https://placem.at/people
以風景為主體的圖片：https://placem.at/places
以東西為主體的圖片：https://placem.at/things

讓使用者可以依自己需求取得不同類型的圖片，除了這三類圖片外，還有其他的參數設定，這邊列幾個小蛙有用到的：

• w -> 寬度
  https://placem.at/people?w=300
  取得以人為主體，並且寬度為 300px 的照片
  
• h -> 高度
  https://placem.at/places?h=300
  取得以人為主體，並且高度為 300px 的照片
  
• random -> 隨機
  https://placem.at/people?w=300&h=300&random=hello
  隨機取得以人為主體，並且寬度為 300px 高度 300px 的照片，預設如果有給寬或高的參數，只會回傳一模一樣的，所以必須靠random來控制隨機
  
• txt -> 產生的圖片上放置文字
  https://placem.at/people?w=400&txt=嗨
  取得以人為主體 300 x 300 的圖片，並在圖片上印出「嗨」的字樣
  
• txtclr -> 文字顏色
  https://placem.at/people?txtclr=fff&w=300&h=300
  隨機取得以人為主體，大小為 300 x 300 的圖片，並設定顏色為白色(fff)，預設值為BFFF，可接受RGB(三個數值)、ARGB(四個數值)或是AARRGGBB(八個數值)，小蛙在這邊不希望出現 300 x 300 的字樣，因此只要 A 的部份設定成 0 就可以產生沒有文字的圖片，例如：ffff。
  
• overlay_color -> 遮罩顏色
  https://placem.at/people?overlay_color=ffffffff
  隨機取得以人為主體，並設定遮罩顏色為透明(ffffffff)，預設值為ACACAC，可接受RGB(三個數值)、RRGGBB(六個數值)或是AARRGGBB(八個數值)，小蛙一開始覺得怎麼圖片顏色暗暗的，改成ffffffff就可以取得比較亮的圖片了。

更詳細的說明就請連到 Placemat 官網去看囉！

Placehold.jp

網址連結：http://placehold.jp/en.html

Placehold.jp 產生的佔位圖是我們最常見的單純色塊 + 區塊大小的文字，(大家看起來是圓角，但那是 CSS 處理過的，原始的是直角喔)

Placehold.jp 的使用方式也非常簡單，除了可以自己設定大小之外，網站也提供了常用的大小區塊直接選擇，如同 Placemat 一樣也可以接受直接透過參數的方式來產生佔位圖，參數設定如下：

http://placehold.jp/{字體顏色}/{寬度}x{高度}.png
http://placehold.jp/{背景顏色}/{字體顏色}/{寬度}x{高度}.png
http://placehold.jp/{字體大小}/{背景顏色}/{字體顏色}/{寬度}x{高度}.png

如果有其他的需求，依照上面的取圖方式填入對應的數值，例如：

1. 產生綠色文字，且大小為 200 x 200 的圖片
   http://placehold.jp/00ff00/200×200.png
   
2. 產生綠色文字、紅色背景，且大小為 200 x 200 的圖片
   http://placehold.jp/00ff00/200×200.png
   
3. 產生綠色文字、紅色背景，且大小為 200 x 200 的圖片
   http://placehold.jp/60/ff0000/00ff00/200×200.png

Placehold.jp 也支援 jpg 及 png 格式的輸出

http://placehold.jp/200x200.png
http://placehold.jp/200x200.jpg

可以加入自己想要的文字

http://placehold.jp/30/999999/ff0000/200x100.png?text=專業偽筆記

最後，還有最後一個功能還蠻有趣的，Placehold.jp 可以透過 css 來做到圓角

http://placehold.jp/300x300.png?css={"border-radius":"15px"}

Lorem Picsum

網址連結：https://picsum.photos/

基本使用
https://picsum.photos/{寬度}/{高度}
https://picsum.photos/{大小}

產生 300 x 200 的圖片
https://picsum.photos/300/200

產生 300 x 300 的方形圖片
https://picsum.photos/300

隨機產生圖片
https://picsum.photos/200/300/?random

灰階圖片
https://picsum.photos/g/200/300

批次產生圖片以 json 回傳
https://picsum.photos/list

還有其他更多詳細用法可以直接到Lorem Picsum看看喔！

這篇文章 方便的佔位圖片產生器 – Placemat、Placehold.jp、Lorem Picsum 最早出現於 記下來。

小蛙在實作 WebView 載入的網頁與 Android 互動時，一直都以手邊的 Nexus 7 2013 來做測試，直到所有功能都已就緒，有一天突然想起之前好像有看到 Javascript 在 2.3.x 會出現錯誤的問題，於是開了 2.3 版本的 emulator 來做測試，由於小蛙實作的部分是從 Javascript 呼叫某一個 function 來實作開啟行事曆的功能，這邊發生了大概類似下面的這種錯誤(小蛙的錯誤訊息已經洗掉了，以下內容來字參考資料1)

JNI WARNING: jarray 0xb5d256f0 points to non-array object (Ljava/lang/String;)
"WebViewCoreThread" prio=5 tid=8 NATIVE
  | group="main" sCount=0 dsCount=0 obj=0xb5cfc348 self=0x8234e98
  | sysTid=2023 nice=0 sched=0/0 cgrp=[fopen-error:2] handle=136531904
  at android.webkit.WebViewCore.nativeTouchUp(Native Method)
  at android.webkit.WebViewCore.nativeTouchUp(Native Method)
  at android.webkit.WebViewCore.access$3300(WebViewCore.java:53)
  at android.webkit.WebViewCore$EventHub$1.handleMessage(WebViewCore.java:1162)
  at android.os.Handler.dispatchMessage(Handler.java:99)
  at android.os.Looper.loop(Looper.java:130)
  at android.webkit.WebViewCore$WebCoreThread.run(WebViewCore.java:633)
  at java.lang.Thread.run(Thread.java:1019)
VM aborting

對於這個問題，參考資料1 的作者將 JavascriptInterface 整理成一個比較完整的 solution，不過因為教學文章「漏漏長」，所以小蛙後來沒有採用這個方案，雖然方案不同，不過解決這個問題的邏輯是差不多的。

小蛙後來使用了參考資料2的方法來解決，這邊大概記錄一下作法 (不知道怎麼讓 Android 與 Javascript 互通的話可參考「Android 與 WebView 中的 Javascript 相互溝通 @ 蛙齋」)：

檢查 Android 版本

設定參數來記錄 Android 版本是否為 2.3.x

private static JavaScriptInterface JSInterface;
// 設置 javascriptInterfaceBroken 來判斷是否為 2.3.x
private static boolean javascriptInterfaceBroken = false;
public static WebView wv;
try {
        if (Build.VERSION.RELEASE.contains("2.3.")) {
                javascriptInterfaceBroken = true;
        }
} catch (Exception e) { }
JSInterface = new JavaScriptInterface(getActivity());

依照版本設定對應動作

if(!javascriptInterfaceBroken){
    // 非 2.3.x 版本，正常執行
    wv.addJavascriptInterface(JSIterface, "JSInterface");
    ...
}else{
    // 2.3.x 版本
    wv.setWebViewClient(new WebViewClient(){
        @Override
        public void onPageFinished(WebView view, String url){
        super.onPageFinished(view, url);
        String handleGingerbreadStupidity =
                "javascript:function addToNotify(title, url, start, end) { window.location='http://JSInterface:addToNotify:'+(title)+'◎'+(url)+'◎'+(start)+'◎'+(end); }; "
                + "javascript: function handler() { this.addToNotify=addToNotify }; "
                + "javascript: var JSInterface = new handler();";
                view.loadUrl(handleGingerbreadStupidity);
        }
        @Override
        public boolean shouldOverrideUrlLoading(final WebView view, final String url) {
            if (url.contains("JSInterface:addToNotify")) {
                // 在這邊可用 regular expression 把剛剛組出來的 url 解回
                                // 須注意如果有中文的話，字串要先從 ISO-8859-1 轉回 UTF-8
                String nUrl = new String(url.getBytes("ISO-8859-1"), "UTF-8");
                String title = "title";
                String desc = "desc";
                String start = "start";
                String end = "end";
                try {
                    Method sMethod = JSInterface.getClass().getMethod("addToNotify", new Class[] { String.class, String.class, String.class, String.class });
                    sMethod.invoke(JSInterface, title, desc, start, end);
                } catch (SecurityException e) {
                    e.printStackTrace();
                } catch (NoSuchMethodException e) {
                    e.printStackTrace();
                } catch (IllegalArgumentException e) {
                    e.printStackTrace();
                } catch (IllegalAccessException e) {
                    e.printStackTrace();
                } catch (InvocationTargetException e) {
                    e.printStackTrace();
                }
            }
            return true;
        }
    });
}

上述程式碼中有幾個部份小蛙提出來記錄：

handleGingerbreadStupidity 字串中的 addToNotify 改成自己的方法名稱；JSInterface 改成自己的 JavaScriptInterface 名稱；後面參數有幾個都用「:」連接，因為小蛙的參數中有冒號會跟原本的冒號混淆，導致要拆出字串的時候很麻煩，因此這邊改成用「◎」來區隔。

shouldOverrideUrlLoading 會接收到從 onPageFinished 過來的 url，接著判斷如果包含剛剛我們自己組合的字串的話，就使用 reflection 的方式來呼叫對應方法。JSInterface.getClass().getMethod 中的 JSInterface 是開頭宣告的 JavaScriptInterface 的物件名稱，getMethod 第一個參數為呼叫的方法名稱，第二個參數是傳入的參數型別，都設定好之後就用 sMethod.invoke 呼叫該方法並傳入需要的物件及參數。

記錄的有點亂，小蛙當時卡在 onPagefinished 中傳參數的部分，因為內容包含了冒號導致發生一些問題；再來是 getMethod 方法不太會用，卡了一段時間 …

這篇文章 Android 2.3 @JavascriptInterface Issue 最早出現於 記下來。

• Android 呼叫 WebView 中的 Javascript

透過 Android 本身的按鈕來達到呼叫 Javascript 的功能很簡單，以小蛙的例子是用 fragment 中放置一個 WebView

上面的程式碼只寫出個大概，取得 WebView 後設定支援 Javascript，並且設定按鈕來執行 Javascript，上面例子小蛙 WebView 中有一個字體放大的 Javascript 叫做 fontSize(‘+’)，因此直接使用 wv.loadUrl(‘要呼叫的 Javascript’); 即可！

• 從 WebView 呼叫 Android Function

這個部分就比較複雜一些些，首先必須先建立一個 JavascriptInterface 物件，設定好要執行的相對應功能。例如：

這邊要注意的是如果 targetSdkVersion 設定為 17 以上，就必須在每個可以被 Javascript 呼叫的方法前面加上 @JavascriptInterface，否則會出現以下錯誤

將設定好的 JavaScriptInterface 設定給 WebView 物件

後面的參數名字可以自己取，小蛙這邊使用 JSInterface，這個名字是讓 Javascript 可以知道透過哪個物件來呼叫。Android 這邊完成後接著在 html 中加入相對應的動作，例如：

設定一個 button 讓使用者點選時執行 function showToast()，而 showToast 方法中倘若存在 JSInterface 物件 (這個物件是上面 wv.addJavascriptInterface 時設定的)，就執行 JSInterface.showToast() 的方法 (這一步就會對應到我們自訂的 JavaScriptInterface 類別中的 public void showToast())，在 app 中顯示 Toast 訊息。
到這邊，從 Android 呼叫 Javascript 以及從 Javascript 呼叫 Android 方法都已經完成，但是在 Android 2.3.x 版本中會發生一些錯誤，造成當機無法正確執行，解決方法請參考 Android 2.3 @JavascriptInterface Issue。

這篇文章 Android 與 WebView 中的 Javascript 相互溝通 最早出現於 記下來。

解開的方法 IE 10 -> 右上角的設定 -> 安全性 -> 網頁隱私權原則

可以看到很多網站，有的寫已封鎖，找到正在測試的網站點選右鍵打開就可以囉！

這篇文章 奇怪的 IE Cookie 設定 最早出現於 記下來。