Web Browser控件與網頁互動 - EXCEL VBA（21）

WebBrowser控件是Internet Explorer的主視窗，它是作為一個ActiveX控件來包裝的。使用者可以使用WebBrowser控件打開任何IE能夠顯示的Web頁面，并提取頁面資料。如有自己的網站，可運用WebBrowser控件實作EXCEL文檔和伺服器間資料交換

WebBrowser控件是作為一個ActiveX控件來包裝的，通常運用在VBA标準控件可滿足大多數應用程式的需求，為了進一步擴充VBA功能，可在應用程式中使用ActiveX控件。ActiveX控件是為使用者進行程式設計所定制的可重用對象，可以極大地擴充VBA的使用範圍。

1、添加WebBrowser控件到工具箱

ActiveX控件是可選控件，它可以被添加到【工具箱】中并在窗體中使用。在預設情況下，【工具箱】将隻顯示标準控件，向【工具箱】添加WebBrowser控件的步驟如下：

第一步、滑鼠右擊【工具箱】空白處，彈出下面的菜單如圖：

第二步、單擊【附加控件】菜單，打開【附加控件】對話框如圖：

第三步、下拉滾動條，在【可用控件】清單中單擊所需的ActiveX控件，如Microsoft Web Browser浏覽器控件，【工具箱】中顯示該控件如圖：

2、WebBrowser控件常用屬性、事件和方法

I、WebBrowser控件常用屬性

Application：傳回WebBrowser控件的自動化對象；
MaxLength：設定文字框中能夠輸入字元的最大數量。預設為0，表示輸入字元沒有數量限制；
MultiLine：設定文字框能否接受和顯示多行文本。屬性值為True顯示多行文本，False隻容納單行文本；
PasswordChar：導航發生前激發，重新整理時不激發；
ScrollBars：設定文字框是否有垂直或水準滾動條；
Text：設定或傳回文字框中内容，與Value屬性相同。

II、WebBrowser控件常用事件

DocumentComplete：當整個文檔完成時激發，重新整理頁面不激發；
DownloadBegin：當某項下載下傳操作已經開始後激發，重新整理也可激發此事件；
DownloadComplete：當某項下載下傳操作已經完成後激發，重新整理也可激發此事件；
BeforeNavigate2：導航發生前激發，重新整理時不激發；
NavigateComplete2：導航完成後激發，重新整理時不激發。

III、WebBrowser控件常用方法

GoBack：相當于IE的【後退】按鈕，使你在目前曆史清單中後退一項；
GoForward：相當于IE的【前進】按鈕，使你在目前曆史清單中前進一項；
GoHome：相當于IE的“ 首頁 ”按鈕，連接配接使用者預設的首頁；
Navigate：連接配接到指定的URL；
Refresh：重新整理目前頁面。

3、WebBrowser控件動态建立網頁

如前所述，工具箱中添加WebBrowser控件後，将其拖入窗體并設定适當尺寸，如圖：

在窗體Initialize事件編寫代碼如下：

Private Sub UserForm_Initialize()
WebBrowser1.Navigate ("about:blank")
WebBrowser1.Document.Clear
WebBrowser1.Document.Open
WebBrowser1.Document.write ("<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'>")
WebBrowser1.Document.write ("<html>")
WebBrowser1.Document.write ("<head>")
WebBrowser1.Document.write ("<title>WebBrowser控件建立動态網頁</title>")
WebBrowser1.Document.write ("<meta charset='utf-8'/>")
WebBrowser1.Document.write ("<style>")
WebBrowser1.Document.write ("</style>")
WebBrowser1.Document.write ("<script type='text/javascript'>")
WebBrowser1.Document.write ("</script>")
WebBrowser1.Document.write ("</head>")
WebBrowser1.Document.write ("<body scroll='no' bgcolor='#E3F3F9' style='border:none;'>")
WebBrowser1.Document.write ("<form name='myFc'>")
WebBrowser1.Document.write ("<table>")
WebBrowser1.Document.write ("<tr><th colspan=2 style='text-align:left; font-size:10pt; color:#a51020;'>1、文本框</th></tr>")
WebBrowser1.Document.write ("<tr><td>  姓名：</td><td>")
WebBrowser1.Document.write ("<input id='myName' style='width:100px; color:#ff0000;' value='張三'/></td></tr>")
WebBrowser1.Document.write ("<tr><th colspan=2 style='text-align:left; font-size:10pt; color:#e51020;'>2、單選按鈕</th></tr>")
WebBrowser1.Document.write ("<tr><td>  性别：</td><td>")
WebBrowser1.Document.write ("<input type='radio' name='myGender' value='1' checked/>男 ")
WebBrowser1.Document.write ("<input type='radio' name='myGender' value='0'/>女</td></tr>")
WebBrowser1.Document.write ("<tr><td>  簡介：</td><td>")
WebBrowser1.Document.write ("<textarea id='myIntroduction' style='width:360px; height:160px; color:#555555;'>")
WebBrowser1.Document.write ("WebBrowser控件是Internet Explorer的主視窗，它是作為一個ActiveX控件來包裝的。")
WebBrowser1.Document.write ("使用者可以使用WebBrowser控件打開任何IE能夠顯示的Web頁面，")
WebBrowser1.Document.write ("并提取頁面資料?如有自己的網站，可運用WebBrowser控件實作EXCEL文檔和伺服器間資料交換")
WebBrowser1.Document.write ("</textarea></td></tr>")
WebBrowser1.Document.write ("</table>")
WebBrowser1.Document.write ("</form>")
WebBrowser1.Document.write ("</body>")
WebBrowser1.Document.write ("</html>")
WebBrowser1.Document.Close
End Sub

注：窗體中添加WebBrowser控件，在窗體初始化事件Initialize中編寫代碼，主要通過WebBrowser控件write方法将HTML文檔寫入空白文檔

窗體運作效果如圖：

4、WebBrowser控件擷取網頁資訊

WebBrowser控件和網頁互動使用需要一定程度的網頁程式設計技術，網頁基本架構由超文本标記語言(Hyper Text Markup Language，HTML)搭建，網頁外觀由層疊樣式表(Cascading Style Sheets，CSS)和一些HTML标簽屬性來修飾完成，網頁動态效果通常使用JavaScript腳本語言來實作。HTML、CSS和JavaScript（JS）技術構成用戶端（前端）網頁程式設計三大基礎，運用WebBrowser控件和網頁交換需要掌握HTML、CSS和JS基本知識。

如果有自己的網站，具備伺服器端（後端）程式設計技能，還可以通過WebBrowser控件專門制作和EXCEL對接的網頁，進而将強的的網頁功能導入EXCEL中。

運用WebBrowser控件和網頁交換需要了解網頁文檔結構和内容，如網頁excelVBA.html文檔如下：

【HTML文檔（http://www.galaxystatistics.com/excel/excelVBA.html）】

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Excel Train
<meta charset="utf-8"/>
<style></style>
 <script type="text/javascript">
function oSum(x,y) {return x+y;}
//無參數調用  
function alertNull(){alert("WebBrowser call!");  }
//有參數調用  
function callWithPar(name, address) {  
alert("Name is " + name + "; address is " + address);  
}  
</script>
</head>
<body scroll="yes" bgcolor="#E3F3F9" style="border:none">
<form name="myFc">
<table>
<tr><th colspan=2 style="text-align:left; font-size:10pt; color:#a51020;">1、文本框</th></tr>
<tr><td>  姓名：</td>
<td><input id="myName" style="width:100px; color:#ff0000;" value="張三"/></td></tr>
<tr><th colspan=2 style="text-align:left; font-size:10pt; color:#e51020;">2、單選按鈕</th></tr>
<tr><td>  性别：</td><td>
<input type="radio" name="myGender" value="1" checked/>男 
<input type="radio" name="myGender" value="0"/>女</td></tr>
<tr><th colspan=2 style="text-align:left; font-size:10pt; color:#e51020;">3、複選框</th></tr>
<tr><td>  愛好：</td><td>
<input type="checkbox" name="myLike" value="1"/>籃球 
<input type="checkbox" name="myLike" value="2"/>遊泳 
<input type="checkbox" name="myLike" value="3"/>跑步</td></tr>
<tr><th colspan=2 style="text-align:left; font-size:10pt; color:#e51020;">4、下拉清單</th></tr>
<tr><td>  專業：</td><td><select id="myMajor">
    <option value="1">數學</option>
    <option value="2">統計學</option>
    <ption value="3">壽險精算</option>
    <option value="4">R語言</option>
</select></td></tr>
<tr><th colspan=2 style="text-align:left; font-size:10pt; color:#e51020;">5、多行文本</th></tr>
<tr><td>  簡介：</td><td>
<textarea id="myIntroduction" style="width:300px; height:100px; color:#555555;">
WebBrowser控件是Internet Explorer的主視窗，它是作為一個ActiveX控件來包裝的。
使用者可以使用WebBrowser控件打開任何IE能夠顯示的Web頁面，并提取頁面資料。
如有自己的網站，可運用WebBrowser控件實作EXCEL文檔和伺服器間資料交換
</textarea></td></tr>
<tr><th colspan=2 style="text-align:left; font-size:10pt; color:#e51020;">6、DIV區塊</th></tr>
<tr><td>  效果：</td><td>
<div id="myEffect" style="width:300px; height:50px; border:#aaaaaa 1px solid; dsiplay:inline;">
<b style="text-align:center; width:100%; padding-top:15px;">這是黑體效果</b>
</div></td></tr>
<tr><th colspan=2 style="text-align:left; font-size:10pt; color:#e51020;">7、圖檔</th></tr>
<tr><td>  頭像：</td><td>
<img src="http://studio.galaxystatistics.com/shiny/rSHIndex/pic/vba1.jpg" id="myImg" style="width:200px; height:260px; color:#ff0000;"/>
</td></tr>
<tr><th colspan=2 style="text-align:left; font-size:10pt; color:#e51020;">8、内崁iFrame架構</th></tr>
<tr><td>  架構：</td>
<td><iframe src="http://www.galaxystatistics.com/excel/excelVBA1.html" id="myIframe" style="width:380px; height:260px; color:#ff0000;"/></td></tr>
</table>
</form>
</body>
</html>

網頁excelVBA.html涉及HTML文檔的常用标簽，通過WebBrowser控件和指定網頁互動包括擷取或設定網頁标簽的值（文本）或屬性值，調用網頁JS函數等"。

通常在EXCEL VBA中通過WebBrowser控件打開網頁時，窗體中的WebBrowser控件顯示網頁時會有立體邊框出現。為了去除這一邊框，可在網頁複制開始第1行定義文檔類型代碼，同時複制在25行的BODY标簽屬性style="border:none"。

根據網頁excelVBA.html内容，在窗體【擷取網頁資訊】指令按鈕的Click事件中輸入如下代碼：

Private Sub CommandButton1_Click()
Dim doc As Object
Dim id As Integer
'打開指定網頁
WebBrowser1.Navigate "http://www.galaxystatistics.com/excel/excelVBA.html"
Set doc = WebBrowser1.Document
MsgBox "文本框資訊：" & doc.getElementById("myName").Value
MsgBox "單選按鈕數量：" & doc.getElementById("myFc").myGender.Length
MsgBox "單選按鈕選項value屬性：" & doc.getElementById("myFc").myGender(0).Value
MsgBox "單選按鈕選項checked屬性：" & doc.getElementById("myFc").myGender(0).Checked
MsgBox "複選框數量：" & doc.getElementById("myFc").myLike.Length
MsgBox "複選框選項value屬性：" & doc.getElementById("myFc").myLike(0).Value
MsgBox "複選框選項checked屬性：" & doc.getElementById("myFc").myLike(0).Checked
MsgBox "下拉清單數量：" & doc.getElementById("myMajor").Options.Length
MsgBox "下拉清單索引：" & doc.getElementById("myMajor").selectedIndex
id = doc.getElementById("myMajor").selectedIndex
MsgBox "下拉清單選中文本：" & doc.getElementById("myMajor").Options(id).Text
MsgBox "下拉清單選中值：" & doc.getElementById("myMajor").Options(id).Value
MsgBox "多行文本内容：" & doc.getElementById("myIntroduction").Value
MsgBox "DIV區塊文本：" & doc.getElementById("myEffect").innerText
MsgBox "DIV區塊HTML：" & doc.getElementById("myEffect").innerHTML
MsgBox "圖檔路徑：" & doc.getElementById("myImg").getAttribute("SRC")
MsgBox "圖檔寬度：" & doc.getElementById("myImg").Style.Width
Dim doc1 As Object
Set doc1 = WebBrowser1.Document.getElementById("myIframe").Document    '設定架構文檔對象
MsgBox "架構文本框資訊：" & doc1.getElementById("myName").Value
End Sub

注：代碼中設定網頁文本對象為doc，對于網頁标簽内容的提取基本按DOM文檔結構解析。

運作窗體，點選【擷取網頁資訊】指令按鈕，結果如下圖：

在VBA環境中通過WebBrowser控件提取網頁資訊，通常将代碼編寫在WebBrowser控件的DocumentComplete事件中，即當整個文檔完成時觸發該事件，這時網頁文檔加載完畢，可保證提取到完整資訊。樣例代碼如下：

Private Sub WebBrowser1_DocumentComplete(ByVal pDisp As Object, URL As Variant)
Application.StatusBar = "網頁文檔下載下傳完畢！"      '在狀态欄中輸入提示資訊
Dim doc As Object
Set doc = WebBrowser1.Document
End Sub

注：DocumentComplete確定WebBrowser下載下傳完成網頁文檔後，通過文檔Document對象可提取網頁标簽資訊

6、WebBrowser控件調用網頁JS函數

根據網頁excelVBA.html内容，在窗體【調用網頁JS函數】指令按鈕的Click事件中輸入如下代碼：

Private Sub CommandButton2_Click()
'調用網頁中無參JavaScript函數alertNull
WebBrowser1.Document.parentwindow.execScript "alertNull()", "JavaScript"
'調用網頁中有參JavaScript函數callWithPar
WebBrowser1.Document.parentwindow.execScript "callWithPar('銀河統計工作室','哈爾濱')", "JavaScript"
MsgBox WebBrowser1.Document.Script.oSum(25, 75)    '調用JS函數傳回值
End Sub

注：代碼中調用的JS函數在網頁文本script标簽之間。注意，打開對應網頁後再運作【調用網頁JS函數】指令按鈕

運作窗體，點選【調用網頁JS函數】指令按鈕，結果如下圖：

本文我們建立了一個InternetExplorer對象并設定了一些屬性。然後，使用.navigate方法打開網頁，并使用.document.parentWindow.execScript方法執行了一個簡單的JavaScript代碼。

請注意，使用InternetExplorer對象加載和執行JavaScript代碼需要将"Microsoft Internet Controls"引用添加到你的VBA項目中。你可以在VBA編輯器的"工具"菜單中的"引用"對話框中勾選該引用。

在VBA中，除了InternetExplorer對象，還可以使用其他浏覽器對象來加載和操作Web頁面中的JavaScript代碼。

Chrome浏覽器對象：可以使用Chrome浏覽器的COM接口（Chrome COM Interface）來在VBA中加載和操作Chrome浏覽器中的JavaScript代碼。這需要先安裝Chrome浏覽器COM接口，然後通過建立Chrome浏覽器對象來實作。示例代碼：

Sub RunJavaScriptInChrome()
    Dim Chrome As Object
    ' 建立 Chrome 浏覽器對象
    Set Chrome = CreateObject("ChromeTab.ChromeBrowser")
    ' 打開指定網址
    Chrome.navigate "http://www.example.com"
    ' 等待加載完畢
    Do While Chrome.Busy Or Chrome.readyState <> 4
        DoEvents
    Loop
    ' 執行 JavaScript 代碼
    Chrome.ExecuteScript "alert('Hello, JavaScript in Chrome!');"
    ' 關閉 Chrome 浏覽器對象
    Chrome.Quit
    ' 釋放對象引用
    Set Chrome = Nothing
End Sub

Firefox浏覽器對象：類似地，也可以使用Firefox浏覽器的COM接口來在VBA中加載和操作Firefox浏覽器中的JavaScript代碼。這同樣需要先安裝Firefox浏覽器COM接口，并通過建立Firefox浏覽器對象來實作。以下是一個示例代碼：

Sub RunJavaScriptInFirefox()
    Dim Firefox As Object
    ' 建立 Firefox 浏覽器對象
    Set Firefox = CreateObject("Mozilla.Browser")
    ' 打開指定網址
    Firefox.navigate "http://www.example.com"
    ' 等待加載完畢
    Do While Firefox.Busy Or Firefox.readyState <> 4
        DoEvents
    Loop
    ' 執行 JavaScript 代碼
    Firefox.ExecuteScript "alert('Hello, JavaScript in Firefox!');"
    ' 關閉 Firefox 浏覽器對象
    Firefox.Quit
    ' 釋放對象引用
    Set Firefox = Nothing
End Sub

使用WebBrowser控件按網址打開伺服器端網頁後，即建立起EXCEL和網頁HTML文檔的資料交換通道，實作在VBA中操控網頁、自動抓取資訊等功能。

Web Browser控件與網頁互動 - EXCEL VBA（21）

繼續閱讀

Excel VBA工作簿操作

通過VBA Application對象抓取騰訊股票實時資料 - EXCEL VBA（24）

運用XmlHttp對象抓取yahoo股票曆史資料 - EXCEL VBA（25）

如何用EXCEL制作時長計算表？

EXCEL工作計劃進度表模闆，實時跟蹤項目進展

EXCEL工資管理系統：全面管理工資，輕松查詢與記錄

重塑教育與學習方式：ClonBrowser與Web 3.0時代的可能性

如何系統學習EXCEL，想一步一步來。求真話，不要營銷。

OFF-WHITEOutOfOffice低幫系帶時尚闆鞋街頭運動元素雙色設計标志性Arrows圖案标志性ZipTie束線

美劇《越獄》精彩片段。而打電話的人正是吉姆。thinkingburrows，yourman'sdead，justlike

Excel 雙斜線表頭繪制

Excel應用技巧之“日期文本轉換為日期格式”1、選擇需要設定的EXCEL表格中的單元格。2、在“資料”工具中點選“分列

EXCEL VBA 自定義函數招标代理費計算

經驗貼，九個實用的EXCEL技巧！#高效辦公小技能##圖表使用規範##爆料#

每天學習一點點-EXCEL-SUM函數和AVERAGE函數

Excel VBA下調用exe的方法