html（網頁）運行本地程序（exe文件）的方法與源碼

信大家在使用一些軟件的時候會發現，只要點擊了它們的一些網頁廣告就會運行一些推廣軟件或者是官方軟件。它們是怎么實現的呢？其實方法很簡單，聽來群網慢慢道來。

下面鏈接是微軟MSDN上的說明，為了大家易懂，所以在這里分享給大家：http://msdn.microsoft.com/en-us/library/aa767914%28v=vs.85%29.aspx

當然，或許還有更復雜的方法，小編只舉一個簡單的例子。

此方法分兩部份：1. 注冊表代碼部份； 2. HTML代碼部份

1.注冊表代碼：

Windows Registry Editor Version 5.00
[HKEY_CLASSES_ROOT\laiqun]
@="laiqun Protocol"
"URL Protocol"=""
[HKEY_CLASSES_ROOT\laiqun\DefaultIcon]
@="C:\\WINDOWS\\NOTEPAD.EXE"
[HKEY_CLASSES_ROOT\>laiqun\shell]
@=""
[HKEY_CLASSES_ROOT\laiqun\shell\open]
@=""
[HKEY_CLASSES_ROOT\laiqun\shell\open\command]
@="\"C:\\WINDOWS\\NOTEPAD.EXE\" "

注釋：laiqun代表鏈接前綴如:[laiqun://]，可修改為您想要的前綴。

C:\WINDOWS\NOTEPAD.EXE\ 代表需要執行EXE的路徑（可執行文件），可替換您想運行的程序。

修改完后保存，將TXT文件重命名為【文件名.Reg】然后運行就加入注冊表中（如下圖）

注冊表代碼

2.html代碼：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div>
<a href="laiqun://">此處文字按需修改</a>
</a>
</div>
</body>
</html>

把上面的html代碼復制到notepad++，修改完成后點擊保存，然后把TXT后綴修改成html即可（如下圖）。

HTML代碼

打開html文件點擊里面的鏈接就能直接打開筆記本，我里面路徑寫的是記事本程序的路徑，所以點擊的時候是打開記事本，這個文件路徑可以在注冊表程序中修改。

注意：編輯代碼建議使用 notepad++等專業文本編輯器，不建議使用電腦自帶的記事本。

好了，關于 html（網頁）運行本地程序（exe文件）的方法與源碼的教程就到這里，謝謝大家支持。

如果大家有什么不明白的地方，可以在下方評論、留言。

oogle Docs宣布將會把HTML遷移到基于Canvas渲染，這一消息的出現再次把幾年前隨HTML5誕生的標簽重新推到了人們視線之中。Canvas在剛推出時主打的優勢就是更快的渲染速度，堪稱HTML屆的“小飛人”，刷新了人們對Web頁面元素繪制速度的印象。但Canvas的優勢僅限于此嗎？

（圖片來源于網絡）

HTML繪圖屆的前輩：SVG

Canvas是HTML5時代引入的“新”標簽。與很多標簽不同，Canvas不具有自己的行為，只將一組API 展現給客戶端 JavaScript ，讓開發者使用腳本把想繪制的東西畫到一張畫布上。

在HTML5之前，人們通常使用SVG來在頁面上繪制出圖形。SVG使用XML來定義圖形，就像使用HTML標簽和樣式定義DIV一樣，我們也可以將一個空白的DIV想象為長方形的SVG，兩者的設計思想是相通的，SVG的本質就是一個DOM元素。而Canvas則不同，Canvas提供的是 JavaScript 的繪圖 API，而不是像 SVG那樣使用XML 描述繪圖，通過JavaScript API直接完成繪制，比起修改XML來說要更簡便、更直接。

除了定義的方式不同，Canvas和DOM（當然也包含SVG）的差異更多的體現在瀏覽器的渲染方式上。

瀏覽器在做頁面渲染時，Dom元素是作為矢量圖進行渲染的。每一個元素的邊距都需要單獨處理，瀏覽器需要將它們全都處理成像素才能輸出到屏幕上，計算量十分龐大。當頁面上內容非常多，存在大量DOM元素的時候，這些內容的渲染速度就會變得很慢。

而Canvas與DOM的區別則是Canvas的本質就是一張位圖，類似img標簽，或者一個div加了一張背景圖（background-image）。所以，DOM那種矢量圖在渲染中存在的問題換到Canvas身上就完全不同了。在渲染Canvas時，瀏覽器只需要在JavaScript引擎中執行繪制邏輯，在內存中構建出畫布，然后遍歷整個畫布里所有像素點的顏色，直接輸出到屏幕就可以了。不管Canvas里面的元素有多少個，瀏覽器在渲染階段也僅需要處理一張畫布。

然而這樣更加強大的功能，不可避免的讓使用canvas渲染有很高的門檻。Google Docs在構建Canvas的過程中重新定義了往常已經被人們所熟悉的內容，例如精確定位、文本選擇、拼寫檢查、重畫調優等。為什么更多開發者還是選擇了接納Canvas這個門檻更高的技術路線呢？這就得回到Canvas的最大優勢：渲染性能。

Canvas的渲染模式

這里的渲染是指瀏覽器將頁面的代碼呈現為屏幕上內容的過程。Canvas和Dom的渲染模式完全不同，搞清楚這個差異對理解Canvas的性能優勢至關重要。

Dom：駐留模式

駐留模式（Retained Mode）是Dom在瀏覽器中的渲染模式。下圖粗略展示了這一過程的工作流程。

DOM的核心是標簽，一種文本標記型語言，多樣性很強且多個標簽之間存在各種關聯（如在同一個DIV下設置為float的子DIV）。瀏覽器為了更好的處理這些DOM元素，減少對繪制API的調用，就設計了一套將中間結果存放于內存的“駐留模式”。首先，瀏覽器會將解析DOM相關的全部內容（包含HTML標簽、樣式和JavaScript），將其轉化為場景（scene）和模型（model）存儲到內存中，然后再調用系統的繪制API（如Windows程序員熟悉的GDI/GDI+），把這些中間產物繪制到屏幕。

駐留模式通過場景和模型緩存減少了對繪制API的調用頻次，將性能壓力轉移到場景和模型生成階段，即瀏覽器需要根據DOM上下文和BOM中的尺寸數據，“自行判斷”每一個元素的繪制結果。

Canvas：快速模式

Canvas采用了和DOM不同的快速模式（Immediate Mode），讓我們先來看看快速模式是如工作的：

與駐留模式相比，快速模式將場景和模型的生成從瀏覽器移交給了開發者。開發者在設計頁面時，就通過Canvas的JavaScript API定義了畫布內所有元素的繪制方式。瀏覽器只需要簡單的執行這些腳本即可，而不需要像渲染DOM一樣逐個處理子元素了。

在快速模式中，頁面的繪制性能得到了大幅提升。但開發者不僅需要指定什么需要畫，還要創建和維護一個模型。此外，開發者還需要管理好當前場景重繪時帶來的改變，以及響應用戶的點擊或輸入操作等。

Canvas的應用優點

上面介紹的兩種不同的模式直接造成了Dom和Canvas的性能差異。對于使用快速模式渲染的Canvas而言，瀏覽器的每次重繪都是基于代碼的，不存在能讓處理流程變慢的多層解析，所以它真的很快。除了快之外，Canvas的靈活性也大大超出DOM。我們可以通過代碼精確的控制如何、何時繪制出我們想要的效果。

在資源消耗上，DOM的駐留模式意味著場景中每增加一點東西就需要額外消耗一些內存，而Canvas并沒有這個問題。這個差異會隨著頁面元素的數量增多而愈加明顯。以B端的企業應用場景為例，表單那種數據量比較小的場景，不同渲染模式帶來的效果差異并不明顯；但在工業制造、金融財會等類Excel電子表格操作的場景下，單元格數量動輒便是上百萬（5萬行x 20列）甚至上億個，瀏覽器需要對表格所有單元格本身內容進行渲染，同時還涉及到豐富的數據處理，情況就完全不同了。

（Web頁面上的電子表格，包含1百萬個單元格）

在Canvas出現之前，在前端渲染表格時只能通過構建復雜的DOM來實現。這種方式下，瀏覽器的性能成為了Web應用瓶頸，讓很多開發者放棄了在瀏覽器上實現電子表格的想法。

在Canvas出現后，快速模式帶來的性能優勢無疑是一個巨大的亮點，大量、復雜的DOM渲染處理帶來的性能問題終于有了解決途徑。

回到電子表格的應用場景，業內已經出現了使用Canvas繪制畫布的表格組件，這類組件在渲染數據層時不僅無需重復創建和銷毀DOM元素，在畫布的繪制過程中，也比Dom元素渲染的限制更少。除了表格之外，Canvas也為數字孿生可視化大屏、頁面游戲等場景帶來了變革。

（數字孿生大屏，精確控制各種形狀、樣式）

總結

總結一下，在渲染模式上，Canvas站在了DOM的對面，瀏覽器對其內容一無所知，一切渲染的權利回到了開發者的手上，這個改變帶來了顯著的性能優勢。此外，我們可以使用Canvas繪制種類更為豐富的UI元素，如線形、特殊圖形等，通過畫法邏輯，還可以實現更加精準的UI界面渲染，解決了瀏覽器差異造成的樣式誤差，讓更多應用場景可以順利遷移到Web平臺上來。

事跟我說他用jQuery取不到頁面上隱藏元素input的值，他的html頁面大概內容如下。

<!DOCTYPE html>
<html lang="zh">
 
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<script type="text/javascript" src="jslib/jquery-1.11.2.min.js"></script>
	<title>淺談Html頁面內容執行順序</title>
	<script type="text/javascript">
		var userId = $('#hiddenUserId').val();
		var contextPath = $('#hiddenContextPath').val();
		var userName = $('#hiddenUserName').val();
	</script>
</head>
 
<body>
	<input type="hidden" id="hiddenUserId" value="101" />
	<input type="hidden" id="hiddenContextPath" value="/web" />
	<input type="hidden" id="hiddenUserName" value="小明" />
</body>
 
</html>

頁面中的JS腳本在head中，JS腳本要讀取的input在body中。瀏覽器對html頁面內容的加載是順序加載，也就是在html頁面中前面先加載，因此當加載到JS腳本時，input還沒有加載到瀏覽器中。JS是一種解釋性的腳本，也是從上而下順序執行，由于這段JS代碼是立即執行的，所以當JS在執行的時候，讀取不到input的值。

最直接的修改方法是把JS放到網頁的最下面執行。

<!DOCTYPE html>
<html lang="zh">
 
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<script type="text/javascript" src="jslib/jquery-1.11.2.min.js"></script>
	<title>淺談Html頁面內容執行順序</title>	
</head>
 
<body>
	<input type="hidden" id="hiddenUserId" value="101" />
	<input type="hidden" id="hiddenContextPath" value="/web" />
	<input type="hidden" id="hiddenUserName" value="小明" />
	
	<script type="text/javascript">
		var userId = $('#hiddenUserId').val();
		var contextPath = $('#hiddenContextPath').val();
		var userName = $('#hiddenUserName').val();
	</script>
</body>
 
</html>

把JS放到網頁的最下面，這樣在JS執行的時候，網頁內容都已經加載完畢。把JS放在網頁的最下面方法并不是最好的解決方法，大部分情況JS并不是總能放在網頁的最下面。這時可以用window的onload事件，onload事件在整個頁面都加載完成后才觸發，可以把JS腳本放在onload里面執行。不同瀏覽器onload事件添加方式也不一樣。

IE下事件：

window.attachEvent('onload', function(){
			var userId = $('#hiddenUserId').val();
			var contextPath = $('#hiddenContextPath').val();
			var userName = $('#hiddenUserName').val();
		});

Chrome/Firefox等DOM標準事件：

window.addEventListener('load', function(){
			var userId = $('#hiddenUserId').val();
			var contextPath = $('#hiddenContextPath').val();
			var userName = $('#hiddenUserName').val();
		});

由于不同瀏覽器的事件添加方式不一樣，jQuery為我們提供了通用的初始化方法，該方法在頁面加載完成時觸發。

$(function(){
			var userId = $('#hiddenUserId').val();
			var contextPath = $('#hiddenContextPath').val();
			var userName = $('#hiddenUserName').val();
		});

上面方法本質就是添加onload監聽事件。

最終修改后的頁面

在線咨詢

上一篇：打開網站就彈出網站公告提示框的JS彈窗代碼
下一篇：程序員必備的5款谷歌瀏覽器插件，你用過幾個？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

html（網頁）運行本地程序（exe文件）的方法與源碼

HTML繪圖屆的前輩：SVG

Canvas的渲染模式

Canvas的應用優點

總結

您的項目需求