javascript 彙整 - 第 2 頁，總計 4 頁 - VECTOR COOL 威得數位行銷

JavaScript import get Error : Cannot use import statement outside a module

JavaScript es6 有引入外部文件的功能 import

import 後得到一個錯誤

Uncaught SyntaxError: Cannot use import statement outside a module

解決方法

必須要宣告為js的模組，在引入js的script tag中加入type=”module” 這個屬性如下

[……]

jQuery javascript scroll to element

javascript 卷軸自動捲到某一元素

$('html, body').animate({
	scrollTop: ele.offset().top - 110 + 'px'
}, 1500 ,'easeInOutQuint');

[……]

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

    }

});

[……]

jQuery unbind all 清除所有綁定事件

unbind all 清除所有綁定事件

就這樣

 
$('p').unbind();

[……]

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');

[……]

Drop and drag

Drag and drop so simple it hurts
https://github.com/bevacqua/dragula

angular-drag-and-drop-lists
http://marceljuenemann.github.io/angular-drag-and-drop-lists/

GRIDSTACK.JS
http://troolee.github.io/gridstack.js/[……]

解決 WordPress 無法使用 jQuery 問題

設計WordPress主題或插件開發時，常會需要使用jQuery，WordPress其實很貼心的已經載入jQuery，但實際使用時發現，原本可以跑的jQuery程式，放進WordPress卻不能跑了，才知道原來WordPress的jQuery要這樣寫。

WordPress 頁面中，確實看到 jQuery 已載入

<script type='text/javascript' src='https://yourdomain.com/wp-includes/js/jquery/jquery.js?ver=1.11.1'></script>
<script type='text/javascript' src='https://yourdomain.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>

頁面中加入一段測試碼

<script>
$( document ).ready(function() {
        alert("hello");
});
</script>

理論上應該是會順利看到 hello 對話框，但是沒有

解決方法：

主要是jQuery寫法的問題，選擇器不能使用習慣的簡碼 $ 符號，而要用下面這兩種寫法，
順利看到hello 對話框

jQuery( document ).ready( function( $ ) {

    alert("hello");

} );

或

( function( $ ){

    alert("hello");

} )( jQuery );

本文出自：https://v123.tw

[……]

Javascript 常用取網址 window.location

// ‘http://127.0.0.1/osac.com.tw/zh-tw/tag_page.php?aaa=1&bbb=2’

// 當前頁面的 URL
window.location.href
// output : ‘http://127.0.0.1/osac.com.tw/zh-tw/tag_page.php?aaa=1&bbb=2’

// 域名
window.location.hostname;
// output : ‘127.0.0.1’

//當前頁的路徑和文件名
window.location.pathname;
// output : ‘/osac.com.tw/zh-tw/tag_page.php’

//所使用的網絡協議（http：//或https：//）
console.log(‘location.protocol=’+window.location.protocol);
// output : ‘http:’

//取URL參數
urlParam = decodeURIComponent(location.search)
// output : ‘?aaa=1&bbb=2′[……]