1. 程式人生 > 實用技巧 >010_URL中JavaScript程式碼的作用和用法示例

010_URL中JavaScript程式碼的作用和用法示例

1. 樣式如下的JavaScript程式碼 :

<a href="javascript:;" class="delete" onclick="m1()">刪除</a>
<script type="text/javascript">
	function m1(){
		alert('觸發了點選事件') ;
	}
</script>

  上述程式碼中的 href="javascript:;" 阻止了超連結的跳轉事件,然後去觸發後面的單擊事件,執行m1函式.

2. 表單提交

<form id="orderForm" action="http://www.baidu.com" method="post">
				
</form>
			
<a href="javascript:document.getElementById('orderForm').submit();">提交form表單</a>

  上述程式碼中的超連結位於form表單的外面,屬性href中嵌入了JS程式碼,這樣可以通過form表單外的標籤觸發提交事件.

  表單的提交使用下面的方式更為簡便,程式碼如下 :

<form id="orderForm" action="http://www.baidu.com" method="post">
			
</form>
<a href="javascript:;" onclick="submitForm()">JQuery超連結提交form表單</a>
<button type="button" onclick="submitForm()">JQuery按鈕button提交表單</button>
		
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	function submitForm(){
		$('#orderForm').submit() ;
	}
</script>

  

3. URL中的JS程式碼小結 : 以下內容參考其他資料

3.1 將JS程式碼放置在偽協議說明符 javascript: 後的URL中,該協議型別聲明瞭URL的主題是任意的JS程式碼,它由JS的直譯器執行.如果有多條JS程式碼,必須使用分號隔開.示例如下 :

<a href="javascript:var now = new Date() ; '<h1>The time is</h1>' + now ;">測試</a>

 跳轉後截圖如下 :

JS中的變數now傳遞給了跳轉之後的頁面,完成了在URL中傳遞JS變數的操作.

當瀏覽器載入一個Javascript URL時,它會執行URL中所包含的Javascript程式碼,並且使用最後一個Javascript語句或表示式的值,轉換為一個字串,作為新載入的文件的內容顯示。這個字串值可能包含HTML標記,並且像載入到瀏覽器中的其它文件那樣格式化顯示。

3.2Javascript URL也可以包含執行操作但不返回值的Javascript語句,如 :

<a href="javascript:alert('hello world');">百度</a>

  此時當載入這種型別的URL的時候,瀏覽器執行Javascript程式碼,但由於沒有值作為新的文件來顯示,所以它不會改變當前顯示的文件。

3.3通常,我們希望使用一個Javascript URL來執行某些Javascript程式碼而不改變當前顯示的文件的JS程式碼。要做到這點,必須保證URL中最後一條語句沒有返加值。一種方式是,使用void運算子來顯式指定一個underfined的值。只需要在Javascript URL的結尾使用void(0);或者在javascript:void(/* code */);即可。

例如 : 下面的URL將開啟一個新的空瀏覽器視窗,而不改變當前視窗的內容 :

<a href="javascript:window.open('about:blank');void(0);">test</a>