Using iframe with local files in Chrome Using iframe with local files in Chrome google-chrome google-chrome

Using iframe with local files in Chrome


I'm sorry to say you that I've tried during weeks to solve this issue (I needed it for a project) and my conclusion is that it's not possible.

There are a lot of problems arround local access through javascript with chrome, and some of them can be solved using --allow-file-access-from-files and --disable-web-security, including some HTML5 offline features, but I definitely think there's no way to access local files.

I recomend you not to lose your time trying to circunvend this and to try to post messages wich you can interpret into the inner pages, so you can do the DOM modifications there.


Per our discussion in my cube just a minute ago :)

I hit this same problem (Ajax post response from express js keeps throwing error) trying to get an AJAX post request to work correctly.

What got me around it is not running the file directly off the file system but instead running it from a local server. I used node to run express.js. You can install express with the following command: npm install -g express

Once that is accomplished, you can create an express project with the following command: express -s -e expressTestApp

Now, in that folder, you should see a file named app.js and a folder named public. Put the html files you wish to work with in the public folder. I replaced the file app.js with the following code:

var express = require('/usr/lib/node_modules/express');var app = express();app.use(function(err, req, res, next){  console.error(err.stack);  res.send(500, 'Something broke!');});app.use(express.bodyParser());app.use(express.static('public'));app.listen(5555, function() { console.log("Server is up and running");  });

Note, the require line may be different. You have to find where your system actually put express. You can do that with the following command: sudo find / -name express

Now, start the express web server with the following command: node app.js

At this time, the webserver is up and running. Go ahead and open a browswer and navigate to your ip address (or if you're on the same machine as your server, 127.0.0.1). Use the ip address:portnumber\filename.html where port number is the 5555 in the app.js file we created.

Now in that browser, you shouldn't (and didn't when we tested it) have any of these same problems anymore.


file:// protocol and http:// protocol make things to behave very differently in regards to iframes. I had the same issues you describe with an app on PhoneGap which uses file protocol to access all local files within the local assets/www folder.

If seems that modern browsers prevent the display of "local" files using the file protocol in iframes for security reasons.

We ended up dumping iframes and just using divs as "viewports". Fortunately the overall size of our app was not that big so we managed to load everything in a single page.