透過 ActionScript 存取 HTML DOM 和 JavaScript 物件

Adobe AIR 1.0 以及更新的版本

當 HTMLLoader 物件傳送 complete 事件時，您便可以存取網頁之 HTML DOM (文件物件模型) 中的所有物件。可以存取的物件包含顯示元素 (例如網頁中的 div 和 p 物件) 以及 JavaScript 變數和函數。complete 事件對應至 JavaScript 網頁的 load 事件。在傳送 complete 之前，DOM 元素、變數和函數可能尚未經過剖析或尚未建立。請盡可能先等待 complete 事件傳送之後，再存取 HTML DOM。

例如，請考慮下列 HTML 網頁：

<html> 
    <script> 
        foo = 333; 
        function test() { 
            return "OK."; 
        } 
    </script> 
    <body> 
        <p id="p1">Hi.</p> 
    </body> 
</html>

這個簡單的 HTML 網頁會定義名為「foo」的 JavaScript 變數和名為「test()」的 JavaScript 函數。這兩者都是網頁之全域 window 物件的屬性。同時，window.document 物件也包含名為 P 的項目 (ID 為「p1」)，您可以使用 getElementById() 方法來存取這個項目。一旦網頁載入完成 (此時 HTMLLoader 物件會傳送 complete 事件)，您便可以透過 ActionScript 存取這些物件，如下列 ActionScript 程式碼所示：

var html:HTMLLoader = new HTMLLoader(); 
html.width = 300; 
html.height = 300; 
html.addEventListener(Event.COMPLETE, completeHandler); 
var xhtml:XML =  
    <html> 
        <script> 
            foo = 333; 
            function test() { 
                return "OK."; 
            } 
        </script> 
        <body> 
            <p id="p1">Hi.</p> 
        </body> 
    </html>; 
html.loadString(xhtml.toString()); 
 
function completeHandler(e:Event):void { 
    trace(html.window.foo); // 333 
    trace(html.window.document.getElementById("p1").innerHTML); // Hi. 
    trace(html.window.test()); // OK. 
}

若要存取 HTML 元素的內容，請使用 innerHTML 屬性。例如，上一個程式碼範例是使用 html.window.document.getElementById("p1").innerHTML 取得名為「p1」的 HTML 元素。

您也可以透過 ActionScript 設定 HTML 網頁的各項屬性。例如，下列範例會使用做為容器之 HTMLLoader 物件的參考，設定網頁上 p1 元素的內容以及 JavaScript 變數 foo 的值：

html.window.document.getElementById("p1").innerHTML = "Goodbye"; 
html.window.foo = 66;