AutoHotkey Community

[jethrow]

Basic Webpage Controls with JavaScript / COM
This tutorial requires the COM Standard Library.

Purpose
The purpose of this tutorial is to teach the intermediate AHK user how to start using the COM Standard Library to control webpages. My goal is to provide methods for controlling webpages, similar to how the AHK Control Commands can control Windows Applications. This tutorial is going to be high level, but will provide links to those who want to dig deeper into these concepts. You don't need to have much programming experience, but I will assume you feel comfortable writing and executing AHK scripts. We will be covering the following three topics:

1. The HTML DOM - (Document Object Model) A basic understanding of the HTML DOM is essential for controlling webpages. This is because it's a "map" or "heirarchy" for accessing parts of the webpage. The HTML DOM is not language dependent, but rather the model for how the webpage document is constructed.
2. JavaScript - We will cover some basic JavaScript because it is the scripting language of the web, and is supported by most web browsers. Controlling webpages using JavaScript is not the primary aim of this tutorial, but it will prove valuable because you should be able to find plenty of useful JavaScript examples online. This will be helpful because in my opinion, the simplest way to start using COM is to learn some basic JavaScript, and then "translate" that code to use with Sean's COM Library.
3. COM - (Component Object Model) All you really need to know about COM for this tutorial is that Internet Explorer is a COM object - which means we can use the COM functions to manipulate it. Using Sean's COM functions is the most effective way to control an Internet Explorer Webpage with AHK.

Disclaimers
For this tutorial, I will show you how to control webpages using JavaScript, along with the AHK COM "translation" in green - note Sean's post below. (Using the COM Library will require Internet Explorer, but JavaScript can be used with most Web Browsers) The guidelines for "translating" JavaScript can be found in the first post of the COM Standard Library thread.

Some other tutorials that helped me out, and inspired this tutorial can be found here:
- COM Tutorial by tank - Study the basics from this; I will not be covering them.
- Control/manipulate webpages using JavaScript by daonlyfreez
- W3Schools - Many links listed below will take you to this website, which is an excellent resource for learning JavaScript in depth.

Thank You:

• Chris Malet for creating AutoHotkey
  
• Sean for creating the COM Standard Library
  
• Both daonlyfreez & tank for the tutorials listed above
  
• tank, sinkfaze, & jaco0646 for reviewing this tutorial

Terms - The following terms will be used throughout this tutorial. You may use these links for a more in-depth description of each item.
HTML DOM, JavaScript, COM, Methods, document, value, element, form, name, ID, Input, Tag, selectedIndex, checked, innerText, innerHTML

Methods - The following Methods will be used throughout this tutorial. (comparable to built-in functions for AHK)
alert(), getElementById(), getElementsByName(), getElementsByTagName(), focus(), click()

Before we begin, this tutorial will be using examples that start with javascript: - which you will feed through the URL Address bar. These examples will be based on (and can be used with) the Search Forum webPage. Our first example will use the alert() method to pop-up a message box that says Hello World! Simply put this javascript in your URL Address bar and hit enter:

[tank]

BRAVO

Thanks for this. My threads are out of date and i just dont have the kind of patience and grammer to produce something like this.

Users should be directed to this thread in the future instead of my IE based COM threads. This work supercedes all of mine
_________________
Basic Webpage Controls with JavaScript / COM - Tutorial by Jethrow

[Sean]

Very nice. IMO, however, it would've been even more clear if done using COM_L for AHK_L than COM for the old AHK. COM_Invoke being explicit may distract users from the main point.

[jethrow]

Thanks for the feedback guys - I was hoping this would prove benificial to the community.

[Sean]

It's a DOM tutorial, so, there are a lot to clarify other than just syntax. When, using JavaScript the top/base object is the Window object, not WebBrowser object. In fact, WebBrowser object is neither part of nor essential for DOM manipulation. So, in strict sense,

[jethrow]

[tank]

Contentwindow is not accessable from the browser object but from a frame object

to get a window object from a pwb is done as thus

[tank]

Even more confusing because Document must be accessed with COM prior to accessing Window.

I generally dont climb back up to or query DOM for the window unles i need to use the execScript method

For sheer convenience I am going to post some JScript and VBS that as far as I can tell isn’t easily found elsewhere.
The main thing to know is the browser encompasses the toolbars and address bar while the window object refers only to the content area
JScript that creates a new browser and navigates

[majkinetor]

I guess its possible to create script and framework from the scripts around the forum that:

1. Loads given HTML into the IE control.
2. Crates the tree presentation of DOM or all automatable objects with user filter.
3. Let the user associate some code with the objectl; some hardcoded operations would be nice for start and plugin architecture to add more; click, send, size for the start. Dynamic function calls could be used as plugins for new operations if desired.
4. Let the user save such project and run it.
_________________

[tank]

are you refering to an ahk Browser in a GUI that functions much the same as HTA applications?
If so of course IMO triggering an ahk script to run from an html page is super easy if its a trusted source


you can use the FileRun function with an onclick event to trigger scripts even pass command line parameters the below i copied from my own proprietary library. I use this in a call center environment with great reliability
IF not obvious the below is VBS

[sinkfaze]

So given the discussion in this thread about "recursing" through frames to a page element, is it possible to amend some of the current iWeb functions or create a new iWeb function(s) to accommodate frame recursion? Or is it just something worth mentioning in the course of this tutorial, for example?

BTW - Excellent tutorial jethrow, glad I could help in whatever small way I could.
_________________
Try Quick Search for Autohotkey or see the tutorial for newbies.

[tank]

edit i spose your refering to this library
iWeb functions
i have considered recurse into frames for some time now but unfortunately the options and depth of recursion seem a bit complex to make reliable I might get around to it sometime in the future but it really seems that frames might be somthing we want to leave ot users more versed in DOM and using Invoke exclusively
_________________
Basic Webpage Controls with JavaScript / COM - Tutorial by Jethrow

[sinkfaze]

Would something like this be feasible? Obviously the user will be responsible for obtaining the frames themselves:

[Carcophan]

Does this mean I have to change my Sig now?
_________________
"Unfortunately a "COM for Dummies" book would be a little like "Neurosurgery for Dummies," in the end you're just gonna have to learn" ~Tank

[tank]

Very astute my young padawan
I spose if you want to update the other functions I havent time right now ill update the zip file with it or you can wait months (perhaps years ) tll i get around to it


@Carcophan no probably not the vast majority still wont follow this tutorial since they have no interest whatsoever in actually learning javascript or DOM. This tutorial is still aimed at folks who know at least that much and to help them convert similar javascript to compatable COM.AHK

Most still wont understand COM DOM or scripting so I think the quote still applies
_________________
Basic Webpage Controls with JavaScript / COM - Tutorial by Jethrow