23.13.在ActionScript和JavaScript之间跨脚本操作
23.13.1.问题
我想访问HTML元素节点，访问JavaScript变量和函数，操作CSS 样式。
23.13.2.解决办法
监听complete事件，使用<mx:HTML>控件的domWindow属性访问HTML DOM。
23.13.3.讨论
HTMLLoader类支持访问HTML文档的DOM对象。你可以访问HTML的节点元素，也可以和页面里的javascript交互，访问其变量和方法，也可以在JavaScript中调用ActionScript方法。
这种在JavaScript和ActionScript直接的调用叫跨脚本。
通过<mx:HTML> 控件的domWindow 属性可以访问HTML 文档的全局JavaScript对象。
domWindow属性是一个通用的对象类型，在其他ActionScript对象上通过点运算符访问HTML DOM的属性。使用domWindow属性，你可以访问HTML节点元素，JavaScript变量和函数以及任何CSS样式表。假定下面的HTML文档将被载入HTML控件中：
这是个简单的页面，只显示文本Hello World。当内容完全载入后就可以getElementId方法访问helloField元素，就像JavaScript代码那样：
当内容被完全载入，且DOM可用时Complete事件从<mx:HTML>控件的HTMLLoader实例内部发出。在completeHandler方法内，应用程序访问test.html文档的helloField元素节点值并打印字符串到调试控制台上。<mx:HTML>控件的domWindow属性是HTML DOM window.的ActionScript表示形式。访问载入的HTML文档并不局限于只读权限，你还可以像下面那样改变helloField元素的文本值：
使用styleSheets属性可访问和操作CSS样式表。styleSheets属性是一个数组对象，根据层叠样式表的申明顺序而创建。下面的代码中helloField元素加入CSS样式：
通过styleSheets属性访问和操作样式表：
CSS样式表的每个样式申明都被放置在一个对象数组中，通过cssRules属性访问。可以通过属性访问和更新样式。
注意：对样式的修改并不会保存在HTMLLoader实例的历史记录中。如果<mx:HTML>控件的location属性被更新，即使使用HTML.historyBack方法，之前所作的任何改变也不会被恢复，使用domWindow属性还可以访问HTML文档的JavaScript变量和函数。
你可能已经注意到在setAge 方法内调用了一个不存在的函数handleAgeChange。虽然ActionScript 方法可以被指定为在HTML DOM 的JavaScript 函数调用的委托，但是如果setAge 方法被调用， 既没有JavaScript 函数也没有ActionScript 函数委托， 将会抛出ReferenceError异常。同样道理，如果domWindow 属性调用了一个不存在的JavaScript对象，也会抛出错误。这使得ActionScript 和JavaScript之间的桥接成为一个依赖。但是这个属性是一个通用的对象类型，松耦合的引入使得应用程序不会依赖于特定的HTML文档。
下面的例子载入test.html文档，更新age属性，调用sayHello方法：
当setAge JavaScript方法被调用时并没有抛出异常，因为handleAgeChange函数已经委托给ActionScript方法ageHandler。这样你可以在JavaScript和ActionScript之间传递任何类型的数据，不过如果不是简单类型(比如Date对象)，则必须转换成适当的类型。
我想访问HTML元素节点，访问JavaScript变量和函数，操作CSS 样式。
23.13.2.解决办法
监听complete事件，使用<mx:HTML>控件的domWindow属性访问HTML DOM。
23.13.3.讨论
HTMLLoader类支持访问HTML文档的DOM对象。你可以访问HTML的节点元素，也可以和页面里的javascript交互，访问其变量和方法，也可以在JavaScript中调用ActionScript方法。
这种在JavaScript和ActionScript直接的调用叫跨脚本。
通过<mx:HTML> 控件的domWindow 属性可以访问HTML 文档的全局JavaScript对象。
domWindow属性是一个通用的对象类型，在其他ActionScript对象上通过点运算符访问HTML DOM的属性。使用domWindow属性，你可以访问HTML节点元素，JavaScript变量和函数以及任何CSS样式表。假定下面的HTML文档将被载入HTML控件中：
+展开
-HTML
<html>
<body>
<p id="helloField">Hello World</p>
</body>
</html>
<body>
<p id="helloField">Hello World</p>
</body>
</html>
这是个简单的页面，只显示文本Hello World。当内容完全载入后就可以getElementId方法访问helloField元素，就像JavaScript代码那样：
+展开
-XML
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Script>
<![CDATA[
private function completeHandler():void {
var p1:String = html.domWindow.document.getElementById('helloField').innerHTML;
trace( p1 );
}
]]>
</mx:Script>
<mx:HTML id="html" width="100%" height="100%" location="test.html"
complete="completeHandler();" />
</mx:WindowedApplication>
<mx:Script>
<![CDATA[
private function completeHandler():void {
var p1:String = html.domWindow.document.getElementById('helloField').innerHTML;
trace( p1 );
}
]]>
</mx:Script>
<mx:HTML id="html" width="100%" height="100%" location="test.html"
complete="completeHandler();" />
</mx:WindowedApplication>
当内容被完全载入，且DOM可用时Complete事件从<mx:HTML>控件的HTMLLoader实例内部发出。在completeHandler方法内，应用程序访问test.html文档的helloField元素节点值并打印字符串到调试控制台上。<mx:HTML>控件的domWindow属性是HTML DOM window.的ActionScript表示形式。访问载入的HTML文档并不局限于只读权限，你还可以像下面那样改变helloField元素的文本值：
+展开
-ActionScript
html.domWindow.document.getElementById('helloField').innerHTML = "Hola!";
使用styleSheets属性可访问和操作CSS样式表。styleSheets属性是一个数组对象，根据层叠样式表的申明顺序而创建。下面的代码中helloField元素加入CSS样式：
+展开
-HTML
<html>
<style>
#helloField {
font-size: 24px;
color: #FF0000;
}
</style>
<body>
<p id="helloField">Hello World</p>
</body>
</html>
<style>
#helloField {
font-size: 24px;
color: #FF0000;
}
</style>
<body>
<p id="helloField">Hello World</p>
</body>
</html>
通过styleSheets属性访问和操作样式表：
+展开
-ActionScript
var styleSheets:Object = html.domWindow.document.styleSheets;
trace( styleSheets[0].cssRules[0].style.fontSize );
styleSheets[0].cssRules[0].style.color = "#FFCCFF";
trace( styleSheets[0].cssRules[0].style.fontSize );
styleSheets[0].cssRules[0].style.color = "#FFCCFF";
CSS样式表的每个样式申明都被放置在一个对象数组中，通过cssRules属性访问。可以通过属性访问和更新样式。
注意：对样式的修改并不会保存在HTMLLoader实例的历史记录中。如果<mx:HTML>控件的location属性被更新，即使使用HTML.historyBack方法，之前所作的任何改变也不会被恢复，使用domWindow属性还可以访问HTML文档的JavaScript变量和函数。
+展开
-HTML
<html>
<script>
var age = 18;
function setAge( num )
{
age = num;
handleAgeChange( age );
}
function sayHello()
{
return "Hello";
}
</script>
<body>
<p id="helloField">Hello World</p>
</body>
</html>
<script>
var age = 18;
function setAge( num )
{
age = num;
handleAgeChange( age );
}
function sayHello()
{
return "Hello";
}
</script>
<body>
<p id="helloField">Hello World</p>
</body>
</html>
你可能已经注意到在setAge 方法内调用了一个不存在的函数handleAgeChange。虽然ActionScript 方法可以被指定为在HTML DOM 的JavaScript 函数调用的委托，但是如果setAge 方法被调用， 既没有JavaScript 函数也没有ActionScript 函数委托， 将会抛出ReferenceError异常。同样道理，如果domWindow 属性调用了一个不存在的JavaScript对象，也会抛出错误。这使得ActionScript 和JavaScript之间的桥接成为一个依赖。但是这个属性是一个通用的对象类型，松耦合的引入使得应用程序不会依赖于特定的HTML文档。
下面的例子载入test.html文档，更新age属性，调用sayHello方法：
+展开
-XML
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Script>
<![CDATA[
private function completeHandler():void {
trace ( html.domWindow.sayHello() );
html.domWindow.handleAgeChange = ageHandler;
trace ( "Current Age: " + html.domWindow.age );
html.domWindow.setAge( 30 );
}
private function ageHandler( value:Object ):void {
trace( "Age changed="+ value );
}
]]>
</mx:Script>
<mx:HTML id="html" width="100%" height="100%"
location="test.html" complete="completeHandler();" />
</mx:WindowedApplication>
<mx:Script>
<![CDATA[
private function completeHandler():void {
trace ( html.domWindow.sayHello() );
html.domWindow.handleAgeChange = ageHandler;
trace ( "Current Age: " + html.domWindow.age );
html.domWindow.setAge( 30 );
}
private function ageHandler( value:Object ):void {
trace( "Age changed="+ value );
}
]]>
</mx:Script>
<mx:HTML id="html" width="100%" height="100%"
location="test.html" complete="completeHandler();" />
</mx:WindowedApplication>
当setAge JavaScript方法被调用时并没有抛出异常，因为handleAgeChange函数已经委托给ActionScript方法ageHandler。这样你可以在JavaScript和ActionScript之间传递任何类型的数据，不过如果不是简单类型(比如Date对象)，则必须转换成适当的类型。
加支付宝好友偷能量挖...
