0

我正在重写一个用于总结回归测试结果的脚本。被测试的程序会输出几个不同的文本文件，这些文件在代码版本之间的任何变化都是开发人员感兴趣的。旧脚本对每个文件使用命令行 diff 实用程序，这需要相当长的时间（有 2000 个测试，每个测试要比较 3 个文件。这在我们的标准开发机器上大约需要 30 分钟）。然后它生成了一个 HTML 文件，其中包含一个表，其中包含指向所有非空差异的链接。

作为一名开发人员，我开始意识到，虽然它们通常很有用，但其中大多数差异从未被查看过。我必须加快这个过程的一个想法是使用 Python filecmp.cmp 工具比较文件，并创建一个包含所有差异的表。然后，使用 diff_match_patch 工具，使用 Javascript 仅区分被点击的链接。这些结果将显示在浏览器中。我想我了解 diff_match_patch 的 API，但我一直在尝试将这些文件加载​​到 Javascript 环境中。

我已经尝试在 iframe 中打开这些文件（我会将其设为不可见），但是一旦文件打开，我似乎无法访问它们的内容。我意识到有同源规则，但我会从与 html 文件所在的同一驱动器中读取文件，我认为这应该是合法的（？）。我不确定我的问题是否与我对 DOM 的理解有关，或者这是不可能的。我对 Javascript 的了解很少/过时，这可能是真正的问题，但这似乎是一个奇怪的用例，所以我很难找到任何示例。如果浏览器有问题，我确实有能力规定使用哪个浏览器。这是我到目前为止所拥有的，这只是一个测试，看看我已经加载了什么以及我正在访问什么。在 Chrome 中我没有添加到 div 中，而在 Firefox 中我得到“

<html>
<head>
  <script type="text/javascript" language="JavaScript">
    function changeSrc() {
    var base = document.getElementById("base");
    base.src="../result/test1.txt";
    var mod = document.getElementById("mod");
    mod.src="../result/test2.txt";

    var result =  mod.contentWindow.document.body.innerText;
    document.getElementById('result').innerHTML = '<BR>' + result;
    }
  </script>
</head>

<body>
  <iframe id="base" src=""></iframe>
  <iframe id="mod" src=""></iframe>
  <br>
  <span onClick="changeSrc();" style="cursor: pointer;">loadFiles</span>
  <br>
  <div id="result"></div>
</body>
</html>

我会很感激任何帮助完成这项工作，或者告诉我我在浪费时间的建议。我也对其他开箱即用的想法持开放态度。也许节省时间，因为我需要运行 filecmp.cmp，不值得麻烦吗？提前致谢！

编辑：我猜这个问题是两部分的：1）如何读取文本文件以在 Javascript 函数中使用（作为字符串）？2）这是一个坏主意吗？

4

2 回答 2

1

尝试在onload处理程序中获取 iframe 的内容，而不是在设置src. 可能是您的获取代码正在触发，而浏览器仍在忙于在 iframe 中加载文件。

var mod = document.getElementById("mod");
mod.onload = function() {
    var result =  mod.contentWindow.document.body.innerText;
    document.getElementById('result').innerHTML = '<BR>' + result;
}
mod.src="../result/test2.txt";
于 2013-08-29T20:17:52.550 回答
1

我对此进行了更多调查。如果您想访问本地文件，而不需要网络服务器，那么 FileReader 界面似乎更合适。

基本位如下，但我的扩展实现（diff 函数只是区分文件内容的长度）处理在异步加载输入文件后自动运行 diff 函数。

它还允许您将两个文件（作为两个文件的单个选择）拖放到 dropzone 上。

这是我的公共 jsFiddle SO18518842。

    var readFileUpdateUI = function(file, element, nameElement) {
        var reader = new FileReader();
        nameElement.innerText = "Loading...";
        reader.onerror = errorHandler;
        reader.onload = function(readEvent) {
            filesLoaded++;
            console.timeEnd('read of ' + file.name)
            var result = readEvent.target.result;
            //                console.log(result);
            element.innerText = result;
            nameElement.innerText = file.name;
            if (filesLoaded === 2) {
                diffFiles();
            }
        };
        console.time('read of ' + file.name)
        reader.readAsText(file);
    };

这个旧答案因需要运行 chrome.exe --allow-file-access-from-files而受到阻碍

不知道火狐。

因此，这对我来说非常有效，但需要注意的是在加载另一组文件之前必须（ Reload Page ），所有文件都通过 file:// 方案访问，并且位于与此脚本相同的目录中。

Firefox 也需要重新加载。

Chrome 和 Firefox 都将所选文件的名称显示为（选择文件）按钮的工具提示。

Firefox 提供除 text/plain 之外的所有文件类型（在接受属性中定义），而 Chrome 不提供。

<html><head>
  <meta http-equiv="Content-Type" content="text/html; charset=US-ASCII">
  <script type="text/javascript" language="JavaScript">
    function changeSrc() {
    var base = document.getElementById("base");
    var fileArray = document.getElementById('input').files
    base.src=fileArray[0].name;
    var mod = document.getElementById("mod");
    mod.src='./'+fileArray[1].name;

    var result =  mod.contentWindow.document.body.innerText;
    document.getElementById('result').innerHTML = '<BR>' + result;
    }
  </script>
</head>
<body>
  <iframe id="base" src=""></iframe>
  <iframe id="mod" src=""></iframe>
  <br>
  <div>
  <input type="file" accept="text/plain" id="input" multiple>
  </div>
  <div>
  <input type="button" onclick="changeSrc();" value="Load Files"/>
  </div>
  <div>
  <input type="button" onclick="location.reload(true);" value="Reload Page"/>
  </div>
  <br>
  <div id="result"></div>
</body></html>
于 2013-08-29T23:35:15.573 回答