JQuery Invalid or unexpected token

在載入 jquery.min.js 會出現下列錯誤:

Uncaught SyntaxError: Invalid or unexpected token

沒有去編輯 jquery.min.js 理論上應該不會出現這種錯誤,如果你已經嘗試各種方法還是會出現這錯誤,並確認程式編寫沒問題,仍然出現此錯誤,無計可施求助無門可以繼續看看這篇文章,也許對你會有幫助。

常見原因:

大部分的情況都是因為程式碼錯誤而造成,常見錯誤全形或半形 「<」「<」、
「“」「”」 、 「`」「’」,或是字串引號開頭結尾不同,請詳細您的檢視程式碼,就可以快速排除這錯誤。

但本篇文章是載入原生地 jquery.min.js 出現的錯誤,顯然不是這方面錯誤。

排除錯誤:

場景:這支 jquery.min.js 在遠端 Server 上是可運行的,透過 Filezilla FTP下載原始碼到 localhost Server 上用相同HTML引入這支 jquery.min.js 並於 Server 中運行,就會得到上述錯誤。

除錯開始

理論上 jquery.min.js 不會犯這種錯誤,所以我們先從周邊著手,先找出問題,我試著建立一個非常簡單的 HTML(下圖)只載入 jquery.min.js 這支程式,以排除其他程式造成錯誤的可能性,但仍然產生錯誤。

也因如此,縮小錯誤範圍了,錯誤就是 jquery.min.js 這支程式,但奇怪的是 jquery.min.js 我並沒有去編修他,而且執行遠端的HTML也是不會有錯誤的,為了證實,接著我修改 local HTML 用 Http 載入遠端的 jquery.min.js 就不會發生錯誤,怪了。

那錯誤是什麼呢?

再度縮小範圍,遠端的 jquery 是可以運行的,本地端卻不行,理論上是相同檔案,沒有道理遠端可以,本地端不能運行,所以,最有可能的原因就是傳輸過程中出了問題。

所以我直接透過瀏覽器直接下載 jquery.min.js 這檔案並用本地端 HTML 載入,結果沒有問題,由此可證,jquery.min.js 是沒有問題的,最有可能的是下載程式碼的軟體出了問題,而我們是透過 Filezilla 用 FTP 方式下載檔案,Filezilla 是一個卓越的免費FTP軟體,理論上也不會有問題,所以試著朝設定方面著手。

配置 Filezilla

再將 Filezilla 重新連線,結果出現了,正常運作,喔耶!!

所以錯誤的原因就是在傳輸過程中的編碼,Filezilla 預設是(自動),天知道自動是自動用什麼傳輸型式到本地端,所以我們指定使用二進位檔案方式,解決這問題,

我的名言:

找到錯誤,錯誤就解決一半了

— 鄭小安

[……]

閱讀更多

Fix An invalid form control with name=’…’ is not focusable

今天在開發一個表單程式,表單一直無法發送,開始來找問題,開啟 Chrome 開發者工具,在 Console 面板中,每送出一次表單,就會出現一個這個訊息:

An invalid form control with name=’…’ is not focusable

原因是 Chrome 阻止設定為 required 的欄位隱藏

也對拉!! 必填欄位又隱藏起來,怎麼填? 表單送出前會做一個簡單的表單驗證

這樣也不行:

<input type="text" style="display:none" required>

這樣當然也不行:

<input type="text" id="example" required>
<script>
	$('#example').hide();
</script>

這樣可以:

大概是原本就是隱藏欄位了,所以沒有特別去驗證

<input type="hidden" required>

解決方法:

開發者會去隱藏欄位當然是有原因的,有時候會因為條件判斷而顯示不同輸入欄位,例如:居住地下拉選單,但使用者可能住於國外,所以表單設計在下拉選單尾端加一個”海外”的選項,選擇了海外,就出現一個自行輸入的文字欄位,像這樣的需求其實蠻常見的,這些輸入欄位通常都只是隱藏起來,依照判斷來顯示,這種欄位當然有可能顯示出來就是必填,下方介紹幾個解決方法來解決這個問題。

novalidate

在 form 屬性加上 novalidate,關閉預設的表單驗證,表單內的所有欄位都不會進行驗證,除非有其他方式進行表單驗證,不然不建議這麼做。

<form novalidate>
    <input type="text" id="example" style="display:none" required>
    <input type="submit" value="submit">
</form>

jQuery prop(‘required’,true)

在顯示的時候,再加上 required,如此,不管隱藏的文字欄位顯示與否,表單都可以正確送出,文字欄位顯示時,就必須填寫。

<form>
    <input type="text" id="example" style="display:none">
    <input type="submit" value="submit">
</form>
<hr>
<input type="button" id="show" value="show">
<script>
$('#show').click(function(e){
	$('#example').css('display','block').prop('required',true);;
});
</script>

這是一個簡單的提示,實務上的做法就看大家如何發揮創意了

 [……]

閱讀更多

jQuery $.each 迴圈 continue 與 break 替代方式

在PHP中或某些語言中,可以在迴圈中使用 continue 及 break 來進行更靈活的迴圈

  • continue :跳過目前動作,繼續執行迴圈的下一個動作
  • break:跳出迴圈,停止迴圈之後的動作

在 jQuery 中迴圈是用 $.each(),但使用 continue 及 break 是不起作用的,可改用下列替代方式,可以達成相同目的。

 
$.each(data, function(index, obj){

    if ($(img).empty()) {

        return; // 等於 continue

    } else {

        return false; // 等於 break

    }

});

[……]

閱讀更多

HTML 錨點偏移 CSS and JS 兩種方法 (offset anchor tag link)

HTML提供了一個錨點連結的功能 (anchor tag link),換頁或不換頁,都可以把瀏覽器卷軸自動捲到錨點位置,但如果網頁上方有一個黏頭的Header (sticky header),RWD手機版本則習慣使用(sticky header),Header 懸浮本文之上,可能會把錨點的元素內容遮蔽,這時我們則需要偏移(sticky header)的高度,避免錨點元素被遮蔽。[……]

閱讀更多

javascript list all the plugins installed in the browser

取得瀏覽器安裝的所有插件

有時需要判斷瀏覽器安裝那些第三方插件,比如:VLC、Flash Player、PDF Viewer等等,藉以作後續的動作,比如說沒有Flash Player引導user安裝,下面這程式就非常有用:

navigator.plugins

會返回一個已安裝plugin的數組

<!doctype html>
<html>
<body>
<div id="example"></div>
<script type="text/javascript">
var x=navigator.plugins.length; // store the total no of plugin stored 
var txt="Total plugin installed: "+x+"<br/>";
txt+="Available plugins are->"+"<br/>";
for(var i=0;i<x;i++)
{
  txt+=navigator.plugins[i].name + "<br/>"; 
}
document.getElementById("example").innerHTML=txt;
</script>
</body>
</html>

輸出:

Total plugin installed: 4
Available plugins are->
Widevine Content Decryption Module
Native Client
Chrome PDF Viewer

參考:

取得某一Plugin版本:

<scrip>
function getFlashVersion() {
  var flash = navigator.plugins.namedItem('Shockwave Flash');
  if (typeof flash != 'object') {
    // flash is not present
    return undefined;
  }
  if(flash.version){ 
    return flash.version;
  } else {
    //No version property (e.g. in Chrome)
    return flash.description.replace(/Shockwave Flash /,"");
  }
}
</script>

參考:

[……]

閱讀更多

javascript get query values from url 取網址參數

本篇使用 Javascript , 若想用jQuery的方法,可參考本站另一篇

jQuery get query values from url 取網址參數 

本篇提供兩種方法,擇一使用

方法一:

/*
    VECTOR COOL
    https://vector.cool
*/
function getUrlParameter(sParam) {
    var sPageURL = decodeURIComponent(window.location.search.substring(1)),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : sParameterName[1];
        }
    }
};

方法二:

/*
    VECTOR COOL
    https://vector.cool
*/
function getURLParameter(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

 

用法:

/*
    VECTOR COOL
    https://vector.cool
*/
var tech = getUrlParameter('technology');
var blog = getUrlParameter('blog');

[……]

閱讀更多

jQuery get query values from url 取網址參數

本篇使用 jQuery方法, 若覺得jQuery的方法很大包,可參考本站另一篇

javascript get query values from url 取網址參數

QueryString.js

把第一段的程式碼放到一個名叫 QueryString.js 的檔案,以後需要時再去引入這支檔案就可。

/*
    VECTOR COOL
    https://vector.cool
*/
(function($) {
    $.QueryString = (function(paramsArray) {
        let params = {};

        for (let i = 0; i < paramsArray.length; ++i)
        {
            let param = paramsArray[i]
                .split('=', 2);

            if (param.length !== 2)
                continue;

            params[param[0]] = decodeURIComponent(param[1].replace(/\+/g, " "));
        }

        return params;
    })(window.location.search.substr(1).split('&'))
})(jQuery);

用法:

/*
    VECTOR COOL
    https://vector.cool
*/
//Get a param
$.QueryString.param
//-or-
$.QueryString["param"]
//This outputs something like...
//"val"

//Get all params as object
$.QueryString
//This outputs something like...
//Object { param: "val", param2: "val" }

//Set a param (only in the $.QueryString object, doesn't affect the browser's querystring)
$.QueryString.param = "newvalue"
//This doesn't output anything, it just updates the $.QueryString object

//Convert object into string suitable for url a querystring (Requires jQuery)
$.param($.QueryString)
//This outputs something like...
//"param=newvalue&param2=val"

//Update the url/querystring in the browser's location bar with the $.QueryString object
history.replaceState({}, '', "?" + $.param($.QueryString));
//-or-
history.pushState({}, '', "?" + $.param($.QueryString));

參考資料:

[……]

閱讀更多

jQuery 確認是否擁有某一標籤屬性

jQuery 並沒有 .hasAttr() 用於判斷某一屬性是否存在,所以透過下面代碼來檢查

此代碼優點在於可檢查屬性是否存在,並檢查是否為空值

/**
* VECTOR COOL
* https://vector.cool
*/
var attr = $(this).attr(‘name’);
if (attr && attr !== false) {
// Element has this attribute
}

 

 [……]

閱讀更多