ActionScript에서 HTML DOM 및 JavaScript 객체에 액세스

Adobe AIR 1.0 이상

HTMLLoader 객체에서 complete 이벤트를 전달하면 페이지에 대한 HTML DOM(문서 객체 모델)의 모든 객체에 액세스할 수 있습니다. 액세스할 수 있는 객체에는 표시 객체(예: 페이지의 div 및 p 객체)는 물론 JavaScript 변수 및 함수도 포함됩니다. complete 이벤트는 JavaScript 페이지 load 이벤트에 해당합니다. complete 를 전달하기 전에 DOM 요소, 변수 및 함수를 파싱 또는 만들지 못했을 수 있습니다. 가능하면 HTML DOM에 액세스하기 전에 complete 이벤트를 기다립니다.

예를 들어 다음과 같은 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 객체에는 getElementById() 메서드를 사용하여 액세스할 수 있는 ID p1 의 이름이 지정된 P 요소가 포함됩니다. 페이지를 로드하면(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 객체에 대한 참조를 사용하여 페이지에서 foo JavaScript 변수의 값 및 p1 요소의 내용을 설정하는 예제입니다.

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