Jquery load() method not working in chrome

Question

<input type="button" value="Load" id="load" />

<div id="file"></div>

$(document).ready(function(){
  $('#load').click(function(){
   $('#file').load('test.html',function(){
    alert('File loaded');  
   });
  });
 });

it is working fine in Mozilla Firefox ... but in chrome it's giving an error "XMLHttpRequest cannot load file:///D:/Tanveer%20Hussain/Jquery/test.html. Received an invalid response. Origin 'null' is therefore not allowed access",in javscript Console...

Answer 1

The issue is just that .load() for local files is blocked by Chrome for security reasons. If you are using it on a server it works, given that all of the files originate from the same place.

To enable a working version locally, try:

In Mac OS X, quite Chrome, enter in Terminal:

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --allow-file-access-from-files

In Windows, quite Chrome, enter in Command Prompt:

chrome.exe --allow-file-access-from-files (Maybe you actually have to have the path... I don't think so. If so, you'll have to find it yourself.)

In Linux, quite Chrome, enter something like this into the terminal:

/usr/bin/google-chrome --allow-file-access-from-files

Answer 2

It seems you are attempting to load local files and it will be blocked due to browser restriction for cross domain or local file access

Run that file from webserver. you can use simple python server

python -m SimpleHTTPServer 8000

open in browser http://localhost:8000/page.html (example: page.html is page which loads 'test.html')

Otherwise, you can use chrome flags as suggested by Ekansh Rastogi