Flex（AS） JS抓取HTML页面元素数据

目前项目是Flex中嵌入HTML页面，在页面切换时需要保存上一个页面的输入未保存的数据，切回时把数据回填，在Flex中比较不好实现，所以想到使用JS脚本。

思路：

1、在Flex的HtmlLoade页面加载完成后，向页面中插入JS脚本

2、JS脚本加载成功后，回调Flex函数进行通知

3、在切换页面时

首先，抓取被切走的页面中的数据并保存[键（pageurl）： 值]

然后，查找当前切换的页面在本地的数据，进行数据回填

AS代码段：

<mx:HTML id="htmlView" width="100%" complete="htmlView_completeHandler(event)" />protected function htmlView_completeHandler(event:Event):void{insertCommentJSScipt(http://127.0.0.1/ntalker_autoform.js);}//插入JS脚本private function insertCommentJSScipt(scriptURL:String):void{if (htmlView && htmlView.domWindow) {var bodyEle:Object = htmlView.domWindow.document.getElementsByTagName("body")[0];if (bodyEle) {var scriptEle:Object = htmlView.domWindow.document.createElement("script");scriptEle.type = "text/javascript";scriptEle.async = "async";scriptEle.charset = "utf-8";scriptEle.src = scriptURL;bodyEle.insertBefore(scriptEle, bodyEle.lastChild);}}}//JS回调函数public function webInfoChanged():void{}private var _unSaveInfo:String = ""; //从本地取出的数据//回填本地保存的数据public function ntkf_setHTMLFormContent():void{TRACE("ntkf_setHTMLFormContent ------------------------------");if(htmlView.htmlLoader && htmlView.htmlLoader.window && htmlView.htmlLoader.window.ntkf_setHTMLFormContent){if(!_unSaveInfo || _unSaveInfo.length == 0 || _unSaveInfo == "{}")return;TRACE("ntkf_setHTMLFormContent _unSaveInfo = " + _unSaveInfo);//调用JS中ntkf_setHTMLFormContent函数进行数据自动回填htmlView.htmlLoader.window.ntkf_setHTMLFormContent(_unSaveInfo);}}//自动抓取页面数据public function ntkf_getHTMLFormContent():void{if(htmlView.htmlLoader && htmlView.htmlLoader.window && htmlView.htmlLoader.window.ntkf_getHTMLFormContent){var unsaveInfo:String = htmlView.htmlLoader.window.ntkf_getHTMLFormContent();}}

以上的Flex代码片段仅供参考，在使用时需要自己整理，并放到合适的位置，以适应自己的需要

JS代码片段：

//脚本中只是简单地抓取了 input、textarea、select、checkbox、radio元素的数据//并且以元素的id优先、name其次为原则function ntkf_getHTMLFormContent() {var result = {};var inputs = document.getElementsByTagName('input');var textareas = document.getElementsByTagName('textarea');var selects = document.getElementsByTagName("select");//获取页面中多有input元素的值for (var i = 0, l = inputs.length; i < l; i++) {var input = inputs[i];if (input.type === 'text' && input.value) {if(input.id){result[input.id] = input.value;}else if(input.name){result[input.name] = input.value;}}else if (input.type === 'radio' && input.checked) {if(input.id){result[input.id] = input.value;}else if(input.name){result[input.name] = input.value;}}else if (input.type === 'checkbox' && input.checked) {if(input.name){result[input.name + '_' + input.value] = input.value;}else if(input.id){result[input.id + '_' + input.value] = input.value;} }}//获取页面中所有select元素的值for (var i = 0, l = selects.length; i < l; i++) {var select = selects[i];if(select.id){result[select.id] = select.selectedIndex;}else if(select.name){result[select.name] = select.selectedIndex;}}//获取页面中所有textarea元素的值for (var i = 0, l = textareas.length; i < l; i++) {var textarea = textareas[i];if (textarea.value) {if(textarea.id){result[textarea.id] = textarea.value;}else if(textarea.name){result[textarea.name] = textarea.value;}}}return JSON.stringify(result);}function ntkf_setHTMLFormContent(str) {var result = JSON.parse(str);var inputs = document.getElementsByTagName('input');var textareas = document.getElementsByTagName('textarea');var selects = document.getElementsByTagName("select");for (var key in result) {//输入框input赋值for (var i = 0, l = inputs.length; i < l; i++) {var input = inputs[i];if (input.type === 'text') {if(input.id && input.id === key){input.value = result[key];}else if(input.name && input.name === key){input.value = result[key];}}else if(input.type === 'radio' && input.value === result[key]) {if(input.id && input.id === key){input.checked = 'checked';}else if(input.name && input.name === key){input.checked = 'checked';}}else if(input.type === 'checkbox') {if(input.name && input.name + '_' + input.value === key){input.checked = 'checked';}else if(input.id && input.id + '_' + input.value === key){input.checked = 'checked';}}}//下拉框select赋值for (var i = 0, l = selects.length; i < l; i++) {var select = selects[i];if(select.id && select.id === key){select.selectedIndex = result[key];}else if(select.name && select.name === key){select.selectedIndex = result[key];}}//textarea赋值for (var i = 0, l = textareas.length; i < l; i++) {var textarea = textareas[i];if(textarea.id && textarea.id === key){textarea.value = result[key];}else if(textarea.name && textarea.name === key){textarea.value = result[key];}}}if (window.webInfoChanged) {window.webInfoChanged();} }var t1;if (!window.webInfoChanged) {//设置一个定时器来避免Flex页面加载和脚本加载之间的时间差，保证能通知到Flext1 = setInterval(execWebInfoChanged, 500);} else {window.webInfoChanged();}function execWebInfoChanged(){if(window.webInfoChanged){window.webInfoChanged();clearInterval(t1);}}