Home » 程式片段

[C#]製作專屬的 WebBrowser 瀏覽器

雖然現在的瀏覽器已經有很多種不同的系統,但若能開發一個量身訂做的瀏覽器時,在操作使用上會更得心應手吧!加上筆者最近寫了「開心農場瀏覽器」,因此就有些網友來信問說如何寫類似的程式。但是要從無到有開發出一個瀏覽器並不是簡單的事,不過若使用 .NET 內建的 WebBrowser 元件的話,保障在開發上能事半功倍。

一樣是先快速的把畫面排出來,這邊使用到 5 個 Button(按鈕) 來當做執行上一頁、下一頁、重新整理、停止及首頁用,接著再放上 Label(標籤)TextBox(文字輸入框)Button(按鈕) 用來讓使用者輸入網址後並前往用,當然最重要的 WebBrowser(瀏覽器) 可別忘記要一起放在 Form(表單) 上喔。

dotnet_webbrowser_1

在放置 WebBrowser(瀏覽器) 的時候要注意一下,它的 Dock 屬性預設是 Fill,它可會是佔滿整個 Form(表單) 的,因此先把它設成 None 後再來手動調整大小及位置。畫面都排版好之後,就讓我們開始來 DIY 專屬瀏覽器囉。

首先當 WebBrowser(瀏覽器) 執行時,筆者希望預設能連到某網址,所以就咱們就要在 Form(表單) 載入時來做設定:

1
2
3
4
private void Form1_Load(object sender, EventArgs e) {
	// 預設載入的頁面
	webBrowser1.Navigate("http://abgne.tw");
}

要讓 WebBrowser(瀏覽器) 連到某網址時可以用 Navigate(網址) 來執行動作。

接下來讓我們一口氣來完成上一頁、下一頁、重新整理、停止及首頁等功能:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
private void backBtn_Click(object sender, EventArgs e) {
	// 上一頁
	webBrowser1.GoBack();
}
 
private void forwardBtn_Click(object sender, EventArgs e) {
	// 下一頁
	webBrowser1.GoForward();
}
 
private void refreshBtn_Click(object sender, EventArgs e) {
	// 重新整理
	webBrowser1.Refresh();
}
 
private void stopBtn_Click(object sender, EventArgs e) {
	// 停止
	webBrowser1.Stop();
}
 
private void homeBtn_Click(object sender, EventArgs e) {
	// 首頁
	webBrowser1.GoHome();
}

透過 WebBrowser(瀏覽器) 內建方法就能輕鬆達到各種指令,像是回首頁也只是 GoHome() 就可以囉。但我們所使用的是 .NET 所提供的元件,因此這邊的首頁設定就是跟 IE 瀏覽器一樣的

完成以上動作之後,再來要做的就是輸入要瀏覽的網址後並前往:

1
2
3
4
5
6
7
8
9
10
11
private void goBtn_Click(object sender, EventArgs e) {
	// 前往網址輸入框中的網址
	webBrowser1.Navigate(textBox1.Text);
}
 
private void textBox1_KeyUp(object sender, KeyEventArgs e) {
	// 如果在網址輸入框中按下 Enter 則前往網址輸入框中的網址
	if(e.KeyCode == Keys.Enter) {
		webBrowser1.Navigate(textBox1.Text);
	}
}

當按下前往的 Button(按鈕) 後就能使用 Navigate(網址) 來連到輸入框中所輸入的網址;除了透過按鈕前往之外,使用者也可能直接輸入完網址後就直接按下 Enter 鈕,所以筆者也針對輸入框的 KeyUP 事件加上 Enter 鈕的判斷。

目前寫到這邊已經算是完成一個簡單且基本的瀏覽器了,但不知道各位有沒有注意到當我們瀏覽到不同網頁時,我們的輸入框中的網址並沒有跟著改變呢?!筆者希望當網頁改變並載入完後就顯示新的網址,所以我們得在 WebBrowser(瀏覽器)DocumentCompleted 事件上加入指定的程式:

1
2
3
4
private void webBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e) {
	// 把目前的網址顯示在網址輸入框中
	textBox1.Text = webBrowser1.Url.ToString();
}

現在整個完成後,就是一個較完整的瀏覽器囉~

dotnet_webbrowser_2

如果還要能控制網頁或是做一些能自動控制功能的話,當然得再這基礎上加上更多的程式功能才行。接下來會用實際的網頁範例來實做出來。

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 開始下載

96 筆針對 [C#]製作專屬的 WebBrowser 瀏覽器 的迴響

  1. 不太懂呢:D
    index已經是int了,下一行接的是string這句是甚麼意思?可以寫給我看看嗎?int index=index.ToString();這樣嗎?轉換部分我還是不太懂甚麼可以轉甚麼...還在K書中0.,0"

  2. 男丁大大你好^^
    請問大大本身從事的是哪一類的工作?
    希望有這榮幸能與大大成為朋友,在程式設計領域互相交流。
    小弟本身對flash程式比較了解、VB略懂,我有一種創業構想,這構想也許有機會股票上市,但是要結合你在程式設計上的專業領域,就是要找像你這種人才來合作啦^^
    我住南部,南部這邊開店成本不像北部那般高,資金和人事方面我都有,現在缺像你這種人才,還有現在經濟不景氣,開店需要一個可以想不開的勇氣~~
    我這種構想如果從我這邊(南部)開始做起,一直拓展到你們北部那邊我想是可以很成功的^^
    詳細內容請大大私聊,這算商業機密了。

  3. 男丁大您好,我已經利用VB寫好了一個簡易的瀏覽器。

    想要繼續來學習如何控制網頁,我已經可以成功的讓程式自動登入YAHOO的帳號。

    想請問男丁大,如果我要讓程式判斷,某一個網頁原始碼內的"ID",的值"Value"

    或者判斷其他的東西。

    只能先讓程式讀取網頁的原始碼,再做文字的搜尋嗎?

    還是有其他的方法呢?

    (我可能說的很模糊,請男丁大見諒,因為我沒有任何底子,都從網路上爬文和自己摸索的~)

    謝謝^0^

    • 你要利用 document.getElementById(id) 的方式來取得指定 id 的元素後..
      再取其值來做你要的判斷動作

  4. 男丁大您好~
    小弟已經學會了利用WebBrowser.Document來讀取網頁的值,控制網頁的動作~
    想進一步學習,如何讀取開心農場那種Flash遊戲的數據、並且控制它。
    希望您能指點,謝謝^^a

    • 要等我有時間才能寫更進階的範例教學XD...
      年底有太多 Case 要完成...

      另外..其實我只是控制滑鼠去點擊該點的座標而已..

  5. 想請教男大為何使用你的HTML Viewer可以使用IE的附加元件(類似ContexMenuStrip動作),但直接使用webBrowser1卻無法啟動IE的附加元件,請教男大是如何處理的呢?或是有何秘訣

    舉例說明:譬如在IE中對圖片按右鍵後-另存圖片(S)會出現儲存圖片對話框並存圖。但用webBrowser對圖片按右鍵會無任何反應。更進一步的若是網頁有使用到附加元件ActiveXObject的呢?

發表迴響