最近浏览器javascript DOMParser和XSL发生了变化

时间:2012-04-30 21:27:56

标签: javascript firefox xslt dom cross-browser

以下版本曾用于Firefox 3.5.x和3.6.x,但在Firefox 11.x或Safari 5.1.x中不再适用。 Javascript不是我的专长,所以我不能快速了解最近的变化。

具体来说,浏览按钮显然仍然“成功”加载文件(应该是从FCP导出的XML序列,尽管未经过验证),但按下Process按钮后,XSLT的结果不再出现在'输出'DIV,就像以前的浏览器版本一样。

可以在http://johnpilgrim.net/color/jProcess.html

的背景中看到

http://johnpilgrim.net/color/sample.xml

提供了适当的测试样本XML文件

html,javascript或xsl中没有任何变化,因此它似乎是最近浏览器的变化。我只是设计并测试它在Firefox中工作,因此从未在其他任何方面进行过测试。

思考?溶液

谢谢! 约翰

<head>

    <script type="text/javascript">

        function jProcess(){
            // Get the file contents locally, using the nifty Firefox 3 nsIDOMFile interface
            var file_contents = document.getElementById('xml_file').files.item(0).getAsText("utf8");

            // Cast/Convert to an XML Document
            var parser = new DOMParser();
            xmlDoc = parser.parseFromString(file_contents, "text/xml");

            // XSLT Transformation
            var xslt = document.implementation.createDocument("", "", null);
            xslt.async = false;
            xslt.load("jProcess.xsl");
            var process = new XSLTProcessor();
            process.importStylesheet(xslt);
            var result = process.transformToFragment(xmlDoc, document);

            // Show the output
            document.getElementById('output').innerHTML= " ";               
            document.getElementById('output').appendChild(result);

            return false;
        };
    </script>
</head>

<body>
<form method="post" onsubmit="return jProcess();">
<fieldset>
    <legend>Select the XML file for the FCP sequence you want to process into HTML.</legend>
    <input type="file" size=100 name="xml_file" id="xml_file">
    <input type="submit" value="Convert">
</fieldset>
</form>
<div id="output"></div>

1 个答案:

答案 0 :(得分:3)

我在Windows上使用Firefox 12尝试过您的示例,错误控制台显示错误

Timestamp: 01.05.2012 11:23:43
Error: document.getElementById("xml_file").files.item(0).getAsText is not a function
Source File: http://johnpilgrim.net/color/jProcess.html
Line: 40

因此,由于在input type =“file”控件上公开的API的更改分别导致该控件公开的File中公开的FileList对象,因此代码根本不再起作用。基于https://developer.mozilla.org/en/DOM/File,方法getAsText在Gecko / FF 7中已经过时,可能会在以后删除。要阅读文件的内容,您现在应该使用https://developer.mozilla.org/en/DOM/FileReader#readAsText%28%29。这似乎是一个进一步的异步API,因此您必须重新构建代码:http://home.arcor.de/martin.honnen/xml/test2012050101.html(该示例适用于当前版本的Firefox,Opera和Chrome)。

所以使用FileReader的示例看起来像

function transform(file, sheetUrl) {
  if (typeof FileReader !== 'undefined') {
    var fileReader = new FileReader();
    fileReader.onload = function(evt) {
      var doc = new DOMParser().parseFromString(this.result, 'application/xml');
      var proc = new XSLTProcessor();
      var req = new XMLHttpRequest();
      req.open('GET', sheetUrl, false);
      req.send(null);
      proc.importStylesheet(req.responseXML);
      document.body.appendChild(proc.transformToFragment(doc, document));
    };
    fileReader.readAsText(file);
  }
  else {
    console.log('No FileReader support.');
  }
}