Skip to content
조회 수 21982 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄


[COM] 자바스크립트 / DOM / HTML 웹페이지 컨트롤

Basic Webpage Controls with JavaScript / COM 


Accessing WebPage Contents - HTML DOM 
To understand how to use Javascript to control a webpage, you need a general understanding of the HTML DOM. It is similar to a "map" or "heirarchy" of the Webpage, as shown here: 
*Image is from this website, which is another great resource for learning Javascript. 
 
In the image above, note the document object - you will be using this object quite often. To access the Webpage, you will need to navigate through the HTML DOM. Here are some simple ways to do this:

  • Object Name & Index 
    Say you want to get the value of the 1st element in the 1st form, which will be the Search for Keywords Input Box. The path would look like this (a collection of objects starts at 0):
    Code:
    document.forms[0].elements[0].value
    Now if you want to show the value of the element in a pop-up, simply put this javascript in your URL Address bar and hit enter:
    Code:
    javascript: alert(document.forms[0].elements[0].value)
    MsgBox % pwb.document.forms[0].elements[0].value
    MsgBox % COM_Invoke(pwb, "document.forms[0].elements[0].value")

  • Object's Name / ID Attribute 
    You can also use the objects name or ID. For example, the 1st forms name is SearchForm, with its 1st elements name being search_keywords. The following javascript fed throught the address bar would produce the same results:
    Code:
    javascript: alert(document.SearchForm.search_keywords.value)
    MsgBox % pwb.document.SearchForm.search_keywords.value
    MsgBox % COM_Invoke(pwb, "document.SearchForm.search_keywords.value")
    Or if you only know the elements name is search_keywords, you could display the value of that element using all, which references all the elements on the webpage:
    Code:
    javascript: alert(document.all.search_keywords.value)
    MsgBox % pwb.document.all.search_keywords.value
    MsgBox % COM_Invoke(pwb, "document.all.search_keywords.value")

  • getElement Methods 
    If you want to get an element(s) based on limited criteria, you can use the following 3 methods:
    • getElementById(id) - returns a reference to the first object with the specified ID 
    • getElementsByName(name) - Returns a collection of objects with the specified name 
    • getElementsByTagName(tagname) - Returns a collection of objects with the specified tagname
    The following example will display the value of the Search for Author Input Box, which is the 4th element on the webpage with an INPUT Tag: 
    (Note - the item number may be dynamic)
    Code:
    javascript: alert(document.getElementsByTagName('input')[3].value)
    MsgBox % pwb.document.getElementsByTagName("input")[3].value
    MsgBox % COM_Invoke(pwb, "document.getElementsByTagName[input].item[3].value")

Controlling the WebPage 
So far we have just retrieved information from the webpage. Now lets start controlling the webpage. Note - if the JavaScript doesn't end with a Method, use void 0.
  • Focus on a Webpage Element - focus() 
    Sets the focus to the Search for Keywords Input Box:
    Code:
    javascript: document.all.search_keywords.focus()
    pwb.document.all.search_keywords.focus()
    COM_Invoke(pwb, "document.all.search_keywords.focus")

  • Click on a Webpage Element - click() 
    Clicks the Search button:
    Code:
    javascript: document.getElementsByTagName('input')[11].click()
    pwb.document.getElementsByTagName("input")[11].click()
    COM_Invoke(pwb, "document.getElementsByTagName[input].item[11].click")

  • Set Value of an Input Field - value 
    Sets the value of the Search for Keywords Input Box:
    Code:
    javascript: document.all.search_keywords.value = 'Input Value'; void 0
    pwb.document.all.search_keywords.value := "Input Value"
    COM_Invoke(pwb, "document.all.search_keywords.value", "Input Value")

  • Dropdown Box Selection - selectedIndex
    Quote:
    <SELECT class=post name=sort_by><OPTION selected value=0>Post Time</OPTION><OPTION value=1>Post Subject</OPTION><OPTIONvalue=2>Topic Title</OPTION><OPTION value=3>Author</OPTION><OPTION value=4>Forum</OPTION></SELECT>
    This is the HTML for the Sort By Dropdown. The following will set the Dropdown to Author:
    Code:
    javascript: document.all.sort_by.selectedIndex = 3; void 0   ; Note - you could use value = 3
    pwb.document.all.sort_by.selectedIndex := 3
    COM_Invoke(pwb, "document.all.sort_by.selectedIndex", 3)

  • Radio / Checkbox Selection - checked
    Quote:
    <INPUT value=ASC type=radio name=sort_dirAscending<BR><INPUT value=DESC CHECKED type=radio name=sort_dirDescending
    This is the HTML for the Sort By Radio selection. The following will set the Radio to Ascending:
    Code:
    javascript: document.all.sort_dir[0].checked = true; void 0
    pwb.document.all.sort_dir[0].checked := True
    COM_Invoke(pwb, "document.all.sort_dir[0].checked", True)

  • Get Text from a WebPage Element - innerText 
    Say you want to get the text at the top of the page (innerHTML will give you all the HTML):
    Code:
    text := pwb.document.getElementsByTagName("TD")[2].innerText
    text := COM_Invoke(pwb, "document.getElementsByTagName[TD].item[2].innerText")
    ... or if you want all the text (or html) from the page:
    Code:
    text := pwb.document.documentElement.innerText
    text := COM_Invoke(pwb, "document.documentElement.innerText")

There you have it! These techniques should help get you started. Next, I would recommend the following:
  1. Try these Controls out on some of your favorite webpages.
  2. Find some more JavaScript examples, and then try "translating" them to COM. (JavaScript is well documented online)
  3. Learn additional ways to access the HTML DOM.
You may be wondering, "How do I find information about the element so I can access it?" Good question! The following tools can help you with that. 



Helpful Tools
  • iWebBrowser2 Learner - This program will give you information about IE webpage elements as you hover over them. 
  • IE HTML Element Spy - This program will show you the information and source code of each element by dragging the curser over the webpage.

Frequently Asked Questions 

What is a pwb? 
- A variable that contains a pointer to the web browser object (Internet Explorer). Here is a simple script for creating one: 

Code:
; AutoHotkey_L:

pwb := ComObjCreate( "InternetExplorer.Application" ) ; Create an IE object
pwb.Visible := True ; Make the IE object visible
pwb.Navigate( "www.AutoHotkey.com" ) ; Navigate to a webpage
Code:
; AHK Basic:

COM_Init() ; Initialize COM
pwb := COM_CreateObject( "InternetExplorer.Application" ) ; Create an IE object
COM_Invoke( pwb, "Visible", True ) ; Make the IE object visible
COM_Invoke( pwb, "Navigate""www.AutoHotkey.com" ) ; Navigate to a webpage

; when finished
COM_Release( pwb ) ; Always release COM objects
COM_Term() ; Always Uninitialize COM

How to access an existing IE object? 
- Sean's GetWebBrowser() function is great for this, and can be found here. Here is a function that accesses an IE object by window name: 

Code:
; AutoHotkey_L:

IEGet( name="" )
{
   IfEqual, Name,, WinGetTitle, Name, ahk_class IEFrame ; Get active window if no parameter
   Name := ( Name="New Tab - Windows Internet Explorer" ) ? "about:Tabs" : RegExReplace( Name, " - (Windows|Microsoft) Internet Explorer" )
   For pwb in ComObjCreate( "Shell.Application" ).Windows
      If ( pwb.LocationName = Name ) && InStr( pwb.FullName, "iexplore.exe" )
         Return pwb 
}
Code (Expand):
; AHK Basic:

IEGet( name="" )
{
   IfEqual, Name,, WinGetTitle, Name, ahk_class IEFrame ; Get active window if no parameter
   Name := ( Name="New Tab - Windows Internet Explorer" ) ? "about:Tabs" : RegExReplace( Name, " - (Windows|Microsoft) Internet Explorer" )
   oShell := COM_CreateObject( "Shell.Application" ) ; Contains reference to all explorer windows
   Loop, % COM_Invoke( oShell, "Windows.Count" ) {   
      If pwb := COM_Invoke( oShell, "Windows.item[" A_Index-1 "]" )
         If ( COM_Invoke( pwb, "LocationName" ) = name && InStr( COM_Invoke( pwb, "FullName" )"iexplore.exe" ) )
            Break
      COM_Release( pwb ), pwb := "" 
   }
   COM_Release( oShell )
   Return, pwb 
}

How to know when the webpage in done loading? 
- Sean's IEReady() function is great for this, and can be found here. Here is an example using the ReadyState property, which should work in may scenarios: 

Code:
; AutoHotkey_L:

pwb.Navigate( "www.AutoHotkey.com" )
While, pwb.ReadyState <> 4
; While, pwb.Busy
   Continue
Code:
; AHK Basic:

COM_Invoke( pwb, "Navigate""www.AutoHotkey.com" )
While, COM_Invoke( pwb, "ReadyState" ) <> 4
; While, COM_Invoke( pwb, "Busy" )
   Continue

OR - here is an example using the DocumentComplete event: 
Code:
; AutoHotkey_L:

pwb := ComObjCreate( "InternetExplorer.Application" )
pwb.Visible := True
ComObjConnect( pwb, "IE_" ), loading = 1 ; Connect IE object & set var "loading" as TRUE
pwb.Navigate( "www.AutoHotkey.com" )
While, loading
   Continue
MsgBox, DONE!
ComObjConnect( pwb ) ; Disconnect IE object
Return

IE_DocumentComplete() { ; the "IE_" prefix corresponds to the ComObjConnect() function above
   Global loading = 0 ; Break the While-Loop
}
Code (Expand):
; AHK Basic:

COM_Init()
pwb := COM_CreateObject( "InternetExplorer.Application" )
COM_Invoke( pwb, "Visible""True" )
sink := COM_ConnectObject( pwb, "IE_" ), loading = 1 ; Connect IE object & set var "loading" as TRUE
COM_Invoke( pwb, "Navigate""www.AutoHotkey.com" )
While, loading
   Sleep, 10
MsgBox, DONE!
COM_DisconnectObject( sink ) ; Disconnect IE object
COM_Release( pwb )COM_Term()
Return

IE_DocumentComplete() { ; the "IE_" prefix corresponds to the COM_ConnectObject() function above
   Global loading = 0 ; Break the While-Loop
}

What if all this stuff is too confusing for me? 
- I would recommend tank's iWeb Functions, which are designed to make web automation more simple. (Currently, there is only an AHK Basic version of these functions)



로그인 후 댓글쓰기가 가능합니다.

?

List of Articles
번호 분류 제목 날짜 조회 수
86 AutoHotKey 클릭해서 새창열리는 페이지에 클릭 또는 값설정 가능한가요? 2011.02.22 12574
85 회로도전자부품 주문한 부품 리스트 file 2013.10.26 19316
84 AutoHotKey 정보수집 2011.03.30 14095
83 컴퓨터잡담 인터넷 익스플러러 속도 향샹을 위한 팁 1 file 2012.02.25 22893
82 AutoHotKey 웹페이지의 내용을 변수에 넣기 2011.02.17 12294
81 [Docs]스프레드시트 스프레드시트 autohotkey html gmail 스마트폰 이용하여 핑로스 즉시 알림받기 file 2018.01.25 3134
80 AutoHotKey 부팅완료 메시지 프로그램 file 2011.12.17 10350
79 AutoHotKey 부팅 완료 체크 2011.02.09 15603
» AutoHotKey [COM] 자바스크립트 / DOM / HTML 웹페이지 컨트롤 3 2011.02.12 21982
77 컴퓨터잡담 [Autohotkey] 인터넷 창을 여러개 띄우고 컨트롤 할때 ahk_id 알아내기 1 3 2009.12.19 17168
76 컴퓨터잡담 [autohotkey] 시스템 레지스트리 수정, 삭제 2010.08.14 6761
75 컴퓨터잡담 [autohotkey] 시스템 레지스트리 수정, 삭제 1 3 2010.08.14 6692
74 AutoHotKey [autohotkey] FTP-업로드 예제분석 2 file 2011.02.05 15624
73 AutoHotKey [AUTOHOTKEY] FTP 제어 file 2011.02.04 20941
72 AutoHotKey [AHK_L] 현재 열려진 인터넷 창 값 가져오기 4 2011.08.02 14226
71 AutoHotKey [ahk_l] 섬세한 인터넷 자동검색 2011.02.16 15904
70 AutoHotKey [ahk_l] 구글의 Gmail 자동로그인 소스 3 2011.02.11 19390
69 AutoHotKey [AHK_B&AHK_L] 엑셀 제어 비교. 2 2011.08.02 17957
68 AutoHotKey [AHK_B&AHK_L] 익스플로러 HTML 문서정보 알아내기(IE HTML Element Spy) 2011.08.08 13329
67 AutoHotKey [ahk]웹페이지가 띄워진 창 내용을 추출하여 로딩이 완료되었는지를 확인할 수 있는 소스 2011.02.25 13051
Board Pagination Prev 1 2 3 4 5 Next
/ 5

http://urin79.com

우린친구블로그

sketchbook5, 스케치북5

sketchbook5, 스케치북5

나눔글꼴 설치 안내


이 PC에는 나눔글꼴이 설치되어 있지 않습니다.

이 사이트를 나눔글꼴로 보기 위해서는
나눔글꼴을 설치해야 합니다.

설치 취소