js解析xml后显示html页面的兼容性问题

需求:xml包含html标签比如talbe等,同时包含填充html的table数据,首先加载xml渲染出xml中的html页面,然后用js获取xml的数据填充到html相应的位置

第一步:创建一个加载xml的函数

function loadXmlFile(xmlFile) {


    var xmlDom = null;


    if (window.ActiveXObject) {


        xmlDom = new ActiveXObject("Microsoft.XMLDOM");//上面代码的第一个行创建一个空的微软 XML 文档对象


        xmlDom.async = "false";//  第二行关闭异步加载,这样确保在文档完全加载之前解析器不会继续脚本的执行


        xmlDom.load(xmlFile);//第三行告知解析器加载路径为xmlFile的 XML 文档。



    } else if (document.implementation && document.implementation.createDocument) {


        var xmlhttp = new window.XMLHttpRequest();


        xmlhttp.open("GET", xmlFile, false);


        xmlhttp.send(null);


        xmlDom = xmlhttp.responseXML;


    } else {


        xmlDom = null;


    }


    return xmlDom;


}


第二步:渲染xml中的html,IE兼容

 

var originalTemplateFilePath =“../yancheng.xml”
var xmlDocSave = loadXmlFile(originalTemplateFilePath);
// 显示xml的页面
    $(xmlDocSave).find('structuredBody').children('component').each(function (index, ele) {
        var thishtmlasxml = $(ele).children("text")[0];
        if (window.ActiveXObject) {
            var thishtml = thishtmlasxml.xml//IE显示代码
            $('#kb_us_record_id').append(thishtml);
        } else {
            var s = new XMLSerializer();  //将对象序列化到 XML 文档中和从 XML 文档中反序列化对象
            var thishtml = $(s.serializeToString(thishtmlasxml));
            $('#kb_us_record_id').append(thishtml.html());
        }
    });

第三步:解析xml中的数据插入到html

  $(".datagroup").each(function (index, ele) {
        parseTemplate(originalTemplateFilePath, ele);//自定义方法


    });


代码........................................................

yangcheng.xml格式如下:

  <?xml version="1.0" encoding="UTF-8"?>
<ClinicalDocument>
<template>
  <flag>xxx</flag>
</template>
<component>
  <structuredBody>
    <component>
      <!--ultrasonic_report-->
      <templateName>xxxxx</templateName>
      <dGIndex></dGIndex>
      <text>
        <div class="datagroup">html相关代码,这些代码需要渲染到页面显示<div>
  </text>
      <section>
       要插入到html页面的数据
     </section>
      </component>
    </structuredBody>
  </component>
</ClinicalDocument>




阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/yc1022/article/details/17125483
文章标签: js
个人分类: js
上一篇固定宽度的DIV中英文不能自动换行
下一篇rails字符转准换成对象及方法
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭