html 怎么用js创建窗口,前端自动化——用js动态生成html页面

首先思路明确：生成的元素是一个完整的DOM对象；这些DOM对象的属性可以是字符串，xml文件，也可以是json格式的数据，存储在后台或者其它位置；通过层层解析，顺着DOM层级关系动态创建在html文档流中；这些html文档放于不同的模板文件中相应生成不同样式的效果。

以下就json格式存储的数据，简单示例一下：

第一步：获取attribute数据

var url = window.android.getCurrentDataUrl();

var data = window.android.getDataBody(url);

var dataJson = JSON.parse(data);

var jsonData = JSON.parse(dataJson['data']);

var jsonData = [] //自主创建(可选)

第二步：创建元素类数据并分别解析

$(function () {

//alert(url);

var cls = {};

AnalyJson(jsonData, cls, data_toggle, $('#main'));

});

//创建JSON解析函数

function AnalyJson(data,cls,data_toggle,div){

if('id' in data){

AnalyJson(data.values,cls,data_toggle,div);

}else{

if('name' in data){

CreateInputViewer(data.name,cls,data_toggle,div);

AnalyJson(data.values,cls,data_toggle,div);

}else{

if('type' in data){

CreateInputViewer(data,cls,data_toggle,div);

}else{

for(var p in data){

CreateInputViewer(data[p],cls,data_toggle,div);

}

}

}

}

//针对不同的解析情况，调用下边函数

function CreateInputViewer(data,cls,data_toggle,div){

attr = {};

//alert(data.type);

switch(data.type){

case 'text':{

//alert(attr['name']);

CreateInput(data,cls.text,data_toggle.text,div);

break;

}

case 'radio':{

//alert(attr['name']);

CreateRadio(data,cls.radio,data_toggle.radio,div);

break;

}

case 'select':{

//alert(attr['name']);

CreateSelect(data,cls.select,data_toggle.select,div);

break;

}

case 'checkbox':{

//alert(attr['name']);

CreateCheckBox(data,cls.checkbox,data_toggle.checkbox,div);

break;

}

case 'photo':{

CreatePhoto(data,cls,data_toggle,div);

//alert("takePhoto");

break;

}

case 'gps' :{

CreateLocation(data,cls,data_toggle,div);

break;

}

default:{

CreateKeyValue(data,attr,div);

}

}

}

//封装一个用于存储ＤＯＭ属性的函数

function GetAttr(p,cls,data_toggle){

var attr={};

if(p in cls){

attr["class"]=cls[p];

}

if(p in data_toggle){

attr["data-toggle"]=data_toggle[p];

}

return attr;

}

最后一步：根据不同的ＤＯＭ对象，创建不同对象

function CreateInput(data,cls,data_toggle,div){

var attr1=GetAttr("p1",cls,data_toggle);

var row = $('

var attr2=GetAttr("p2",cls,data_toggle);

attr2['name']=data.key;

attr2['placeholder']=data.keyname;

attr2['type']='text';

var input= $('').attr(attr2);

row.append(input);

div.append(row);

}

function CreateLocation(data,cls,data_toggle,div){

var attr1=GetAttr('p1',cls.button,data_toggle.button);

var row= $('

var spattr=GetAttr('sp',cls.button,data_toggle.button);

var span=$('').attr(spattr);

span.append(data.keyname+":");

var btnattr=GetAttr('p2',cls.button,data_toggle.button);

btnattr['id']=data.key;

btnattr['name']=data.key;

btnattr['onclick']="takeLocation(this.name)";

var button = $('').attr(btnattr);

button.html('获取定位');

row.append(button);

div.append(row);

}

function CreateButton(data,cls,data_toggle,onclick,div){

var attr1=GetAttr('p1',cls,data_toggle);

var row= $('

var spattr=GetAttr('sp',cls,data_toggle);

var span=$('').attr(spattr);

span.append(data.keyname+":");

var btnattr=GetAttr('p2',cls,data_toggle);

btnattr['name']=data.key;

//btnattr['onclick']=onclick.onclick;

btnattr['onclick']=SetScanToActive();

var button = $('').attr(btnattr);

button.html(data.value);

row.append(button);

div.append(row);

}

function CreateImage(data,cls,data_toggle,div){

var attr1=GetAttr('p1',cls,data_toggle);

var row= $('

var imgattr=GetAttr('p2',cls,data_toggle);

imgattr['id']=data.key;

imgattr['height']="70";

imgattr['width']="100";

var img = $('').attr(imgattr);

row.append(img);

div.append(row);

}

function CreatePhoto(data,cls,data_toggle,div){

var attr1=GetAttr('p1',cls.button,data_toggle.button);

var row= $('

var spattr=GetAttr('sp',cls.button,data_toggle.button);

var span=$('').attr(spattr);

span.append(data.keyname+":");

var btnattr=GetAttr('p2',cls.button,data_toggle.button);

btnattr['name']=data.key;

btnattr['onclick']="takePhoto(this.name)";

var button = $('').attr(btnattr);

button.html("拍照");

row.append(button);

div.append(row);

var attr=GetAttr('p1',cls.img,data_toggle.img);

var imgrow= $('

var imgattr=GetAttr('p2',cls.img,data_toggle.img);

imgattr['id']=data.key;

imgattr['height']="70";

imgattr['width']="100";

var img = $('').attr(imgattr);

imgrow.append(img);

div.append(imgrow);

}

function CreateRadio(data,cls,data_toggle,div){

var attr1=GetAttr('p1',cls,data_toggle);

var row = $('

var spattr=GetAttr('sp',cls,data_toggle);

var span=$('').attr(spattr);

span.append(data.keyname+':');

row.append(span);

var attr2=GetAttr('p2',cls,data_toggle);

var attr3=GetAttr('p3',cls,data_toggle);

attr3['name']=data.key;

attr3['type']=data.type;

for(var json in data.values){

var label=$('').attr(attr2);

attr3['value'] = data.values[json].key;

var input= $('').attr(attr3);

label.append(input);

label.append(data.values[json].value);

row.append(label);

}

div.append(row);

}

function CreateSelect(data,cls,data_toggle,div){

var attr1=GetAttr('p1',cls,data_toggle);

var row=$('

var spattr=GetAttr('sp',cls,data_toggle);

var span=$('').attr(spattr);

span.append(data.keyname+':');

row.append(span);

var attr2=GetAttr('p2',cls,data_toggle);

attr2['name'] = data.key;

var select=$('').attr(attr2);

var attr3=GetAttr('p3',cls,data_toggle);

for(var option in data.values){

attr3['value']=data.values[option].key;

var opt = $('').attr(attr3);

opt.html(data.values[option].value);

select.append(opt);

}

row.append(select);

div.append(row);

}

function CreateCheckBox(data,cls,data_toggle,div){

var attr1=GetAttr('p1',cls,data_toggle);

var row=$("

var spattr=GetAttr('sp',cls,data_toggle);

var span=$('').attr(spattr);

span.append(data.keyname+':');

row.append(span);

var attr2=GetAttr('p2',cls,data_toggle);

var attr3=GetAttr('p3',cls,data_toggle);

attr3['name']=data.key;

attr3['type']='checkbox';

for(var checkbox in data.values){

var label=$("").attr(attr2);

attr3['value'] = data.values[checkbox].key;

var input=$("").attr(attr3);

label.append(input);

label.append(data.values[checkbox].value);

row.append(label);

}

div.append(row);

}

function CreateKeyValue(data,attr,div){

if(data.key)

div.append($('

else{

div.append($('

}

}

function CreatePhotoFromAndroid(data){

var jsonObject = JSON.parse(data);

//alter(jsonObject.id);

//alter(jsonObject.data);

$('#'+jsonObject.id).attr({"src":jsonObject.data});

}

function CreateLocationFromAndroid(data,cls,data_toggle){

var jsonObject = JSON.parse(data);

var attr1=GetAttr("p1",cls,data_toggle);

var row = $('

var attr2=GetAttr("p2",cls,data_toggle);

attr2['name']="longitude";

attr2['placeholder']="经度";

attr2['type']='text';

attr2['value']=jsonObject.longitude;

var input= $('').attr(attr2);

var id = jsonObject.id;

$('#'+id).after(row.append(input));

var attr3=GetAttr("p2",cls,data_toggle);

attr3['name']="latitude";

attr3['placeholder']="纬度";

attr3['type']='text';

attr3['value']=jsonObject.latitude;

var linput= $('').attr(attr3);

var lrow = $('

$('#'+id).after(lrow.append(linput));

//var lrow = $('

//var linput = $('');

//linput.attr({"name":"latitude","value":jsonObject.latitude,"placeholder":"纬度"});

//lrow.append("纬度");

//input.attr({"name":"altitude","value":jsonObject.altitude,"placeholder":"高程"});

//$('#'+id).after(row.append(input));

//input.attr({"name":"address","value":jsonObject.address,"placeholder":"地址"});

//$('#'+id).after(row.append(input));

}

function SetScanToActive(result){

//alert($(document.activeElement).val(result));

$(document.activeElement).val(result);