美文网首页
js读取本地xml文件并应用xsl样式(兼容IE、Firefox

js读取本地xml文件并应用xsl样式(兼容IE、Firefox

作者: 晴窗细语 | 来源:发表于2020-07-22 15:20 被阅读0次

原版本只在IE上生效。


    var xml_str = "xml文件路径";
    var xsl_str = "xsl文件路径";

    var xml = new ActiveXObject("Microsoft.XMLDOM");
    xml.async = false;
    xml.load(xml_str);

    // 建立另一个解析对象,导入xsl文档;  
    var xsl = new ActiveXObject("Microsoft.XMLDOM");
    xsl.async = false;
    xsl.load(xsl_str);

    // 将XML文档用XSL文档进行转换;  
    document.write(xml.transformNode(xsl));

用到了 ActiveXObject 方法,该方法只针对IE,Firefox与Chrome上均会报错,代码修改为:

      var xml_str = "xml文件路径";
      var xsl_str = "xsl文件路径";

      var userAgent = navigator.userAgent;

      if(!!window.ActiveXObject || "ActiveXObject" in window) {
        initIE();    // ie 7, 8, 11
      } else if (userAgent.indexOf("Firefox") > -1) { //判断是否Firefox浏览器
        initFireFox();
      } else if (userAgent.indexOf("Chrome") > -1) {
        initChrome(); 
      } else {
        initChrome();    
      }
      
      function initIE() {
        var xml = new ActiveXObject("Microsoft.XMLDOM")
        xml.async = false;
        xml.load(xml_str)
        // 建立另一个解析对象,导入xsl文档;  
        var xsl = new ActiveXObject("Microsoft.XMLDOM")
        xsl.async = false
        xsl.load(xsl_str)
        // 将XML文档用XSL文档进行转换;  
        document.write(xml.transformNode(xsl));  
      }

      function initFireFox() {
        var xsl = document.implementation.createDocument('', '', null);  

        if (typeof xsl.load === 'function') {
          xsl.async = false;  
          xsl.load(xsl_str);

          var xsltProcessor=new XSLTProcessor();
          xsltProcessor.importStylesheet(xsl);
          var xml = document.implementation.createDocument('', '', null);  
          xml.async = false;  
          xml.load(xml_str); 
          var fragment = xsltProcessor.transformToFragment(xml,document);
          document.getElementById("content").innerHTML = "";
          document.getElementById("content").appendChild(fragment); 
        } else {
          initChrome();
        }
      }

      function initChrome(){
        var xslStylesheet;
        var xmlDoc;
        var xsltProcessor = new XSLTProcessor();

        // load the xslt file
        var xhr = new XMLHttpRequest();
        xhr.open("GET", xsl_str, false);
        xhr.send();

        xslStylesheet = xhr.responseXML;
        xsltProcessor.importStylesheet(xslStylesheet);

        // load the xml file
        xhr = new XMLHttpRequest();
        xhr.open("GET", xml_str, false);
        xhr.send();

        xmlDoc = xhr.responseXML;

        var fragment = xsltProcessor.transformToFragment(xmlDoc, document);

        document.getElementById("content").innerHTML = "";
        document.getElementById("content").appendChild(fragment);
      }

  • Firefox可通过新建XSLTProcessor对象的方式来导入xsl样式表,但不同Firefox版本XMLDocument对象支持不同,高版本没有load()方法,故高版本采用xhr方式请求本地文件(与Chrome方式相同)。
  • 默认采用xhr请求本地文件。

其中,Firefox与Chrome均需配置浏览器以便能通过xhr方式请求本地文件。配置为:

Firefox:
1、 在浏览器的地址栏输入“about:config”,回车
2、 搜索“security.fileuri.strict_origin_policy”
3、 将设置的true值该为false
4、 重启浏览器。

Chrome:
1、 浏览器图标右键 -> 属性
2、 在”快捷方式” –> “目标” 后面加上 --enable-file-cookies --allow-file-access-from-files (与之前的信息有空格)
3、 重启浏览器。

相关文章

网友评论

      本文标题:js读取本地xml文件并应用xsl样式(兼容IE、Firefox

      本文链接:https://www.haomeiwen.com/subject/fxxtlktx.html