I have the file file:///C:/index.html that has an iframe inside it:

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

the contents of the Files folder load into the iframe but I can not access to them by javascript or jquery. what can I do?

I have tried $('#folder_browser').contents().find('body').html(); but no luck!

I have the file file:///C:/index.html that has an iframe inside it:

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

the contents of the Files folder load into the iframe but I can not access to them by javascript or jquery. what can I do?

I have tried $('#folder_browser').contents().find('body').html(); but no luck!

• javascript
• jquery
• html
• iframe

• 2 you can't do anything due to the same origin policy. Use a webserver. – Kevin B Commented Mar 12, 2014 at 19:41
• you can drag into the other pane, use an <input type=file> to browse, write a batch file that outputs a json folder listing to consume in your main page, or use a more advanced deployment setup like HTA, Chrome Packaged Apps, "node-webkit" (one word), WinJS/win8, or adobe AIR. – dandavis Commented Mar 12, 2014 at 20:31
• I just want to get list of files in the folder! – user1447420 Commented Mar 12, 2014 at 20:47
• If browsers could go grabbing file listings, we'd be in big trouble. – Diodeus - James MacFarlane Commented Mar 12, 2014 at 21:19

1 Answer 1

Cause "Same origin policy" you can't get the content of an iframe either in this kind of situations nor in the case you have the main page from a domain and the iframe document from another domain.

"Same origin policy" is a set of restrictions that browsers apply to webpages to prevent municating each other. These restrictions prevent a lot of security issues from internet web sites like accessing to your private data stored on your local machine using tricks like that one.

Nevertheless there are some ways (and conditions) to bypass these restrictions:

1. window.document.domain variable manipulation
2. Proxy
3. Cross Document Messaging

But this is possible only if both pages are into the same domain and by modifying the content of both html pages (in particular their javascripts) so pages can authorize each other munications. This can be only done if both the parent page and the iframe child page are web pages: in this case the address file:///C:/something/ is not a web address, it is a local directory.

It is possible to find some interesting tutorials about same origin policy at

Bypass Same Origin Policy ,

and

Same-origin policy for file: URIs .

In this last one in particular you can read "The new security.fileuri.strict_origin_policy preference, which defaults to true, can be set to false if the user doesn't want to strictly enforce the same origin policy on file: URIs."

Another interesting information resource is:

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

In which I found the following hint that may help:

The only real cross-browser solution to circumvent the problem altogether is to serve the content with a local webserver, so that you can access it through HTTP.

In other words you have to install a web server software into your puter and configure it to serve files under an address like http:///yourlocalwebserverdirectory.

Nevertheless you can get files (with the interaction of the user) by using the html input type file, here a working example:

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>