访问本地文件的 iframe 内容答案

【问题标题】：access to iframe contents of local file访问本地文件的 iframe 内容
【发布时间】：2014-03-12 19:34:21
【问题描述】：

我有一个文件 file:///C:/index.html，里面有一个 iframe：

<iframe id="folder_browser" src="file:///C:/Files/"></iframe>

Files 文件夹的内容加载到 iframe 中，但我无法通过 javascript 或 jquery 访问它们。我该怎么办？

我试过$('#folder_browser').contents().find('body').html();，但没有成功！

【问题讨论】：

由于同源策略，您无能为力。使用网络服务器。
您可以拖到另一个窗格中，使用进行浏览，编写一个批处理文件输出一个 json 文件夹列表以在您的主页中使用，或者使用更高级的部署像 HTA、Chrome Packaged Apps、“node-webkit”（一个词）、WinJS/win8 或 adobe AIR 等设置。
我只想获取文件夹中的文件列表！
如果浏览器可以抓取文件列表，我们就麻烦大了。

标签： javascript jquery html iframe

【解决方案1】：

由于“同源策略”，无论是在这种情况下，还是在您拥有来自域的主页和来自另一个域的 iframe 文档的情况下，您都无法获取 iframe 的内容。

“同源策略”是浏览器应用于网页以防止相互通信的一组限制。这些限制可以防止互联网网站的许多安全问题，例如使用类似的技巧访问存储在本地计算机上的私人数据。

尽管如此，还是有一些方法（和条件）可以绕过这些限制：

window.document.domain 变量操作
代理
跨文档消息传递

但这只有在两个页面都在同一个域中并且通过修改两个 html 页面的内容（特别是它们的 javascripts）以便页面可以授权彼此通信时才有可能。仅当父页面和 iframe 子页面都是网页时才能这样做：在这种情况下，地址 file:///C:/something/ 不是网址，而是本地目录。

可以找到一些关于同源策略的有趣教程在

Bypass Same Origin Policy ,

和

Same-origin policy for file: URIs .

特别是在最后一个中，您可以阅读“新的 security.fileuri.strict_origin_policy 首选项，默认为 true，如果用户不想严格执行文件上的同源策略：URI。”

另一个有趣的信息资源是：

Bypassing the Same-Origin-Policy For Local Files During Development .

我发现以下提示可能会有所帮助：

完全规避这个问题的唯一真正的跨浏览器解决方案是使用本地网络服务器提供内容，以便您可以通过 HTTP 访问它。

换句话说，您必须在您的计算机中安装一个网络服务器软件，并将其配置为在http:///yourlocalwebserverdirectory 之类的地址下提供文件。

尽管如此，您可以通过使用 html 输入类型文件来获取文件（通过用户的交互），这里是一个工作示例：

document.getElementById('loadfile').onchange = function(event) {
  var files = loadfile.files;
  var len = files.length;
  var outpt = document.getElementById('filelist');
  
   for (var i=0; i<len; i++)
     {
       outpt.innerHTML += files[i].name + '<br>';
     }
 }

<input type="file" id="loadfile" name="files[]" multiple = "multiple" title="load one or more files" autofocus="autofocus" />

<div id="filelist"></div>

【讨论】：