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页面加载和脚本加载之间的时间差，保证能通知到Flex
	t1 = setInterval(execWebInfoChanged, 500);
} else {
  window.webInfoChanged();
}

function execWebInfoChanged()
{
	if(window.webInfoChanged)
	{
		window.webInfoChanged();
		
		clearInterval(t1);
	}
}