Search the Community

IE Embedded Control Versioning Use IE 9+ and HTML5 features inside a GUI This UDF allows the use of embedded IE controls which support IE versions greater than IE 7. By default, all embedded IE controls default to IE 7 compatibility mode (unless for some reason somebody has IE 6 installed!), so its not possible to use most of the HTML5 features available today. Fortunately, IE 9 and greater allow the use of HTML5, and the embedded IE control actually supports it. The problem is convincing Windows to let your program actually use those features! There are Registry branches that modify how an IE control works in specific programs. Those branches are: HKCU\Software\Microsoft\Internet Explorer\MAIN\FeatureControl\FEATURE_BROWSER_EMULATION HKLM\SOFTWARE\Microsoft\Internet Explorer\MAIN\FeatureControl\FEATURE_BROWSER_EMULATION In at least one of these branches, the executable name needs to appear as a value name ("autoit.exe" for example), and the value data needs to indicate what IE version to 'emulate'. The value data is actually dependent on the version and whether quirks-mode is enabled. See Web Browser Control - Specifying the IE Version for more information. Note that a 64-bit O/S needs adjustments to the HKLM paths. Also, prefer the HKCU branch unless the program needs to enable access across all user accounts. HTML5 Canvas Element Example Anyway, all the complexity of setting the right value with the right name with the right 32/64-bit branch is handled for you in this UDF. Enabling support for IE9+, and new HTML5 features, is as simple as making one call to _IE_EmbeddedSetBrowserEmulation(). _IE_EmbeddedSetBrowserEmulation() takes an executable name (@AutoItExe if none is provided), and checks the Registry for an entry for it. If it doesn't find one, it will create one and enable support for later versions of IE. The full parameters to the function are as follows: _IE_EmbeddedSetBrowserEmulation($nIEVersion, $bIgnoreDOCTYPE = True, $bHKLMBranch = False, $sExeName = @AutoItExe) The parameter passed in $nIEVersion can be anything from 8 to 11 [or 12+ in the future], or just the current version of IE, which is available also through a call to _IE_EmbeddedGetVersion(). $bIgnoreDOCTYPE controls when IE will go into quirks mode based on any "<!DOCTYPE>" declarations on webpages. This mode can cause major problems, so by default it is set to ignore it (set this to False to enable it). $bHKLMBranch controls where in the registry the Browser Emulation Mode setting will be stored. If you wish to store the mode for ALL users, set this parameter to True. Note, however, that elevated privileges are required for modifying the HKLM branch! If the call to _IE_EmbeddedSetBrowserEmulation() is successful, then you can enable a (more) HTML5 compliant IE browser control in a GUI. The complete set of functions in the UDF: _IE_EmbeddedGetVersion() ; Gets version of IE Embeddable Control (from ieframe.dll or Registry) _IE_EmbeddedGetBrowserEmulation() ; Gets Browser Emulation Version for given Executable (or 0 if not found) _IE_EmbeddedSetBrowserEmulation() ; Sets Browser Emulation Version. NOTE: HKLM branch REQUIRES ELEVATED PRIVILEGES! _ IMPORTANT: Setting the embedded browser object to a newer version of IE may alter the behavior of some things. See documenation for the HTMLDocumentEvents2 interface and HTMLAnchorEvents2 interface for example. Also, there is at least one difference in behavior noted by mesale0077 in working with IE10 (and possibly other versions of IE) - clicks for elements inside an <a> anchor tag will register as the actual internal element rather than the surrounding anchor. For example, an <img> element wrapped by an <a> anchor will only send the click to the <img> element and not propagate it any further. A workaround for this is to check the parentNode to see if it is an <a> element. See the discussion in the >ObjEvent dont work thread. It could be that there's some other reason for this behavior, but nothing has come to light yet. As an aside, also see trancexx's response in >ObjEvent usage for more techniques for capturing IE events. History: An example of HTML5 use, which has a little interactive Canvas, follows (requires IE9 or higher!): #include "IE_EmbeddedVersioning.au3" ; =============================================================================================================================== ; <IE_EmbeddedHTML5Example.au3> ; ; Example of using 'IE_EmbeddedVersioning' UDF ; ; This example 1st attempts to set the Browser Emulation information in the registry, then ; creates an embedded IE control with an interactive HTML5 Canvas element. ; ; Author: Ascend4nt ; =============================================================================================================================== #Region IE_CANVAS_EXAMPLE #include <GUIConstantsEx.au3> #include <WindowsConstants.au3> #include <IE.au3> ; ----------- ; GLOBALS ; ----------- Global $bMouseDown = False, $iLastX1 = 0, $iLastY1 = 0 Global $g_oCanvas, $g_oCtx Global $hGUI, $ctGUI_ErrMessageLabel Global $GUI_IE_Obj Global $nRet = _WinMain() ; Optionally remove valuename at Exit (not recommended if compiled to executable) ;~ _IE_EmbeddedRemoveBrowserEmulation() Exit $nRet ; ====================================================================================================== ; Embedded IE Browser-Emulation Fix + HTML5 Example ; ====================================================================================================== Func _WinMain() ConsoleWrite("@AutoItX64 = " & @AutoItX64 & ", IsAdmin() = " & IsAdmin() & @CRLF) ;; Get Current IE Embeddable Control Version (from ieframe.dll) Local $sIEVer = _IE_EmbeddedGetVersion(), $nIEVer = @extended ConsoleWrite("Embedded Version = " & $sIEVer & ", as Int: " & $nIEVer & ", @error = " & @error & @CRLF) ; Old IE version w/o HTML5 support? Exit If $nIEVer < 9 Then Return MsgBox(0, "Old IE Version", "IE version is less than 9, HTML5 example will not work") ;; Current Browser Emulation Mode for this executable (if exists) Local $nIEBEVer = _IE_EmbeddedGetBrowserEmulation() ConsoleWrite("GetEmbeddedVersion: " & $nIEBEVer & ", @error = " & @error & ", @extended = " & @extended & @CRLF) ;; Set Browser Emulation Mode for this executable (if not already set or set to a different version) ; HKCU Branch: _IE_EmbeddedSetBrowserEmulation() ; HKLM Branch: ;_IE_EmbeddedSetBrowserEmulation(-1, True, True) If @error Then ; -1 error means trying to access HKLM, so script needs elevation to access the Registry If @error = -1 Then If MsgBox(32 + 3, "Elevation Required", "Elevate script to enable setting Browser Emulation Mode?") = 6 Then Return _ReRunIfNotElevated() Return 1 EndIf Return MsgBox(0, "Error", "Couldn't set Browser Emulation mode") EndIf ;Local $oErrorHandler = ObjEvent("AutoIt.Error", "_ErrFunc") ;; Create Embedded Browser Control and GUI Local $oIE = _IECreateEmbedded() ; GUI (vars are Global) $hGUI = GUICreate("Embedded Web control Test", 460, 360, -1, -1, $WS_OVERLAPPEDWINDOW + $WS_CLIPSIBLINGS + $WS_CLIPCHILDREN) $GUI_IE_Obj = GUICtrlCreateObj($oIE, 10, 10, 440, 340) $ctGUI_ErrMessageLabel = GUICtrlCreateLabel("", 100, 500, 500, 30) GUICtrlSetColor(-1, 0xff0000) GUISetState(@SW_SHOW) ;Show GUI ; Doesn't work (at least for keyboard focus): ;~ ControlFocus($hGUI, '', $GUI_IE_Obj) ;; Initialize Embedded Control and write some HTML5 data to it _IENavigate($oIE, 'about:blank' ) ; Basic Near-Empty HTML (with minimal CSS styling for Canvas element) Local $sHTML = '<!DOCTYPE html>' & @CR & '<html>' & @CR & '<head>' & @CR & _ '<meta content="text/html; charset=UTF-8" http-equiv="content-type">' & @CR & _ '<title>Experiments</title>' & @CR & _ '<style>canvas { display:block; background-color:white; outline:#00FF00 dotted thin;}</style>' & @CR & _ '</head>' & @CR & '<body>' & @CR & '</body>' & @CR & '</html>' _IEDocWriteHTML($oIE, $sHTML) _IEAction($oIE, "refresh") ;; Setup Event Object Functions Local $oEventsDoc = ObjEvent($oIE.document, "Event_", "HTMLDocumentEvents2") #forceref $oEventsDoc ;~ ConsoleWrite("Obj Name = " & ObjName($oIE) & @CRLF) ;~ ConsoleWrite("Location = " & $oIE.document.location.pathname & @CRLF) ; -------------------------------------------------------------------------------------- ; Create Canvas Element through the DOM (optionally just add it in the HTML5 above) ; ------------------------------------------------- ; Note: Support in browsers, see "Can I use..." ; @ http://caniuse.com/#feat=canvas ; and @ http://caniuse.com/#search=canvas ; ------------------------------------------------- ; IE minimum is version 9+, 10+ has more features, but WebGL support requires version 11+ ; -------------------------------------------------------------------------------------- $g_oCanvas = $oIE.document.createElement("canvas") $g_oCanvas.id = "myCanvas" ;~ ConsoleWrite("Canvas ID = " & $g_oCanvas.id & @CRLF) $oIE.document.body.appendChild($g_oCanvas) ; Optionally, if added already through the HTML5 text: ;Local $g_oCanvas = _IEGetObjById($oIE, "myCanvas") If @error Then Return MsgBox(0, "Error", "Error creating/accessing Canvas") ;; Tweak Canvas Size, Move into View ;~ ConsoleWrite("window innerwidth = " & $oIE.document.parentWindow.innerWidth & @CRLF) ;$oIE.document.parentWindow.scrollTo(0, 10) $g_oCanvas.width = 420 $g_oCanvas.height = 320 ;ConsoleWrite("Canvas item offsetTop = " & $g_oCanvas.offsetTop & @CRLF) $g_oCanvas.scrollIntoView() ;; Grab the Canvas 2D Context $g_oCtx = $g_oCanvas.getContext("2d") ;; Example Drawing: Gradiant Local $oGrad = $g_oCtx.createLinearGradient(0,0,0,60) If IsObj($oGrad) Then $oGrad.addColorStop(0, "red") $oGrad.addColorStop(1, "blue") $g_oCtx.fillStyle = $oGrad EndIf $g_oCtx.fillRect(0,0,419,60) ;; Example Drawing: Text $g_oCtx.font = "30px serif" $g_oCtx.fillStyle = "white" $g_oCtx.textBaseline = "top" $g_oCtx.fillText("HTML5 Canvas Drawing!", 50, 10) ;; Example Drawing: Circle, Line $g_oCtx.beginPath() $g_oCtx.arc(200, 100, 20, 0, ACos(-1) * 2) $g_oCtx.fillStyle = "red" $g_oCtx.fill() $g_oCtx.beginPath() $g_oCtx.lineWidth = "3" $g_oCtx.strokeStyle = "green" $g_oCtx.moveTo(185, 85) $g_oCtx.lineTo(215, 115) $g_oCtx.stroke() ; Waiting for user to close the window While GUIGetMsg() <> $GUI_EVENT_CLOSE Sleep(10) WEnd GUIDelete() EndFunc ; ====================================================================================================== ; IE Event Functions - React to Mouse events with some Canvas graphics ; ====================================================================================================== #Region IE_EVENT_FUNCS ; For right-click, the context menu pops up, UNLESS we change the Event's 'returnValue' property Volatile Func Event_oncontextmenu($oEvtObj) If IsObj($oEvtObj) Then ; Convert to string so that 0 doesn't match EVERY string Local $sId = $oEvtObj.srcElement.id & "" If ($sId = "myCanvas") Then $oEvtObj.returnValue = False EndIf EndFunc Volatile Func Event_onmousedown($oEvtObj) If IsObj($oEvtObj) And IsObj($g_oCtx) Then ; Map click coordinates to Canvas coordinates $iLastX1 = $oEvtObj.x - $g_oCanvas.offsetLeft $iLastY1 = $oEvtObj.y - $g_oCanvas.offsetTop ;~ ConsoleWrite("Downclick recvd at X1: " & $iLastX1 & ", Y1: " & $iLastY1 & ", MouseButton [1 = left, 2 = right, etc] = " & $oEvtObj.button & @CRLF) ; Check if click was in fact within Canvas element If $iLastX1 >= 0 And $iLastX1 < $g_oCanvas.width And $iLastY1 >= 0 And $iLastY1 < $g_oCanvas.height Then ; Signal mouse-down occurred inside Canvas $bMouseDown = 1 ; Make a small square where initial down-click was detected $g_oCtx.fillStyle = "blue" $g_oCtx.fillRect($iLastX1 - 2, $iLastY1 - 2, 3, 3) EndIf EndIf EndFunc Volatile Func Event_onmouseup($oEvtObj) If IsObj($oEvtObj) And IsObj($g_oCtx) Then ;~ ConsoleWrite("MouseUp" & @LF) If $bMouseDown Then Local $iX = $oEvtObj.x - $g_oCanvas.offsetLeft, $iY = $oEvtObj.y - $g_oCanvas.offsetTop ; Random color in "#0f1100" (RGB) string form Local $sColor = "#" & Hex(Random(0, 255, 1), 2) & Hex(Random(0, 255, 1), 2) & Hex(Random(0, 255, 1), 2) ;; Draw either a line or circle depending on where the mouse button is released If $iX = $iLastX1 And $iY = $iLastY1 Then ; Circle if mouse start = mouse end $g_oCtx.beginPath() $g_oCtx.arc($iX, $iY, 8, 0, ACos(-1) * 2) $g_oCtx.fillStyle = $sColor $g_oCtx.fill() Else ; Line if mouse start <> mouse end $g_oCtx.beginPath() $g_oCtx.lineWidth = "3" $g_oCtx.strokeStyle = $sColor $g_oCtx.moveTo($iLastX1, $iLastY1) $g_oCtx.lineTo($iX, $iY) $g_oCtx.stroke() EndIf $bMouseDown = 0 EndIf EndIf EndFunc Volatile Func Event_onkeydown($oEvtObj) If IsObj($oEvtObj) Then ConsoleWrite("Event type: " & $oEvtObj.type & "id (0 is document) = " & $oEvtObj.srcElement.id) ConsoleWrite(", keycode = " & $oEvtObj.keyCode & ", shiftkey = " & $oEvtObj.shiftKey & @CRLF) EndIf EndFunc ; ====================================================================================================== #EndRegion IE_EVENT_FUNCS #EndRegion IE_CANVAS_EXAMPLE #Region UTIL_FUNCS ; ====================================================================================================== ; Func _ReRunIfNotElevated() ; ; Does what it says. (rumored to occasionally say what it does) ; ; Author: Ascend4nt ; ====================================================================================================== Func _ReRunIfNotElevated() If IsAdmin() Then Return 0 Else If @Compiled Then ; If compiled to A3X, we need to execute it as if not compiled. Local $sCmd = (@AutoItExe = @ScriptFullPath) ? "" : ("/AutoIt3ExecuteScript " & @ScriptFullPath) Return ShellExecute(@AutoItExe, $sCmd, @ScriptDir, "runas") Else Return ShellExecute(@AutoItExe,@ScriptFullPath,@ScriptDir,"runas") EndIf EndIf EndFunc #EndRegion UTIL_FUNCS IEEmbeddedVersioning.zip ~prev Downloads: 61 Also, HTML5+Javascript standalone Canvas demo (should run in any browser): HTML5StandaloneCanvasDemo.zip

Greetings! I am having an issue that I can't seem to be able to figure out. I would really appreciate an extra pair of eyes to validate my work so far. All this is, so far, is just a bunch of shapes on an HTML page. It is to be a very simple game ( just exploring Javascript through making this ) but right now I am just building the framework/elements. The script is this <!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } #canvas-container { width: 100%; text-align:center; } canvas { display: inline; } </style> </head> <body onload="startUp()"> <div id="canvas-container"> <canvas id="game" width="300" height="500"></canvas> </div> <script> var canvas = document.getElementById('game'); var ctx = canvas.getContext('2d'); var x = canvas.width; var y = canvas.height; var scoreVal = 0; var itemXRand = Math.floor(Math.random() * x) + 1 ctx.stroke(); function cloud(){ ctx.beginPath(); ctx.moveTo(170, 30); ctx.bezierCurveTo(130, 100, 130, 150, 230, 150); ctx.bezierCurveTo(250, 180, 320, 180, 340, 150); ctx.bezierCurveTo(420, 150, 420, 120, 390, 100); ctx.bezierCurveTo(430, 40, 370, 30, 340, 50); ctx.bezierCurveTo(320, 5, 250, 20, 250, 50); ctx.bezierCurveTo(200, 5, 150, 20, 170, 80); ctx.closePath(); ctx.lineWidth = 5; ctx.fillStyle = '#8ED6FF'; ctx.fill(); ctx.strokeStyle = '#0000ff'; ctx.stroke(); } function workArea(){ ctx.beginPath(); ctx.rect(0, 0, x, y); ctx.fillStyle = "#2ab9ff"; ctx.fill(); ctx.stroke = 1; } function topRect(){ ctx.beginPath(); ctx.rect(0, 0, x, 30); ctx.fillStyle = "#D3D3D3"; ctx.fill(); ctx.stroke = 1; } function scoreKeep(){ ctx.font = "15px Arial"; ctx.fillStyle = "#000000"; ctx.fillText("Score "+scoreVal,5, 25); } function bttmRect(){ ctx.beginPath(); ctx.rect(0, y-30, x, 30); ctx.fillStyle = '#5bc928'; ctx.fill(); ctx.stroke = 1; } function monstRect(){ ctx.beginPath(); ctx.rect(0, y-80, x, 30); ctx.fillStyle = 'red'; ctx.fill(); ctx.stroke = 1; } function itemCirc(){ var centerX = itemXRand var radius = 15; var positionY = 45; ctx.beginPath(); ctx.arc(centerX, positionY, radius, 0, 2 * Math.PI, false); ctx.fillStyle = randomColor(); ctx.fill(); ctx.lineWidth = 1; ctx.strokeStyle = '#003300'; ctx.stroke(); } function startUp(){ workArea(); topRect(); bttmRect(); scoreKeep(); itemCirc(); monstRect(); cloud(); } function randomColor(){ return('#'+Math.floor(Math.random()*16777215).toString(16)); } </script> </body> </html> The issue is that cloud() and monstRect() will not show up when the page loads. If I comment out workArea(), topRect(), and bttmRect() in the function "startUp()" then monstRect() and cloud() show up. I've re-read those little snippets of code for those three areas that I comment out and I can't see where I have gone wrong. Any advice or if you can spot my mistake I would really appreciate it. Thank you! -Reiz