同样地,该页面可以包含图像或css文件,并在离线时使用它们,我想要包含一个3MB的电子表格,javascript将其读入2D数组中,希望它能够在IE8以及现代浏览器上运行。
C:\Folder\index.html
C:\Folder\code.js
C:\Folder\picture.png
C:\Folder\spreadsheet.csv
我在网上找到了多种方法,比如
<script src="jquery-csv.js"></script>
var table = $.csv.toArrays("spreadsheet.csv");
或者
d3.text('spreadsheet.csv', function(error, _data){
var table = d3.csv.parseRows(_data);
});
或者
$(document).ready(function() {
$.ajax({
type: "GET",
url: "data.txt",
dataType: "text",
success: function(data) {processData(data);}
});
});
但是我经常会遇到同源策略错误,例如:
XMLHttpRequest cannot load file://data.txt. Received an invalid response. Origin 'null' is therefore not allowed access.
Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match.
我似乎无法使它们离线工作。我该怎么做才能实现呢?
编辑:
我已经成功让以下内容在Firefox上仅对文本文件起作用,使用了在这里找到的CSVToArray函数,对于这样大小的文件来说速度相当缓慢,并使用了一个隐藏的iframe。
最终,最好能够在IE8上运行,如果我使用csv而不是txt文件也是如此,但至少这是一个开始。
<iframe style="display:none;" id='text' src = 'file.txt' onload='read_text_file()'>
</iframe>
<script type="text/javascript" >
function read_text_file() {
var text = document.getElementById('text').contentDocument.body.firstChild.innerHTML;
var table = CSVToArray(text);
}
对于IE8,我设法在小范围内使其正常工作,但对于3MB的文件,它偶尔会导致浏览器崩溃,并且总是会向用户发出大量警告消息,说明正在使用ActiveX,并且会提示脚本会减慢计算机的速度。
window.onLoad = readFileInIE("file.csv");
function readFileInIE(filePath) {
try {
var fso = new ActiveXObject("Scripting.FileSystemObject");
var file = fso.OpenTextFile(filePath, true);
var text = file.ReadAll();
var table = CSVToArray(text);
file.Close();
return fileContent;
} catch (e) {
if (e.number == -2146827859) {
alert('Unable to access local files due to browser security settings. ' +
'To overcome this, go to Tools->Internet Options->Security->Custom Level. ' +
'Find the setting for "Initialize and script ActiveX controls not marked as safe" and change it to "Enable" or "Prompt"');
}
}
}
html5文件
或jquery-offline.js
有所帮助。 - marathonman