JQuery .load() method isn't working in Google Chrome browser

Question

Hi I am loading a page using jquery .load() method.
the page is loaded perfectly on the firefox but it isn't load when I am opening the page on the google chrome.

Do you guys have some solution.

<script>
          var xmlHttp;
          function initAjax() {
              try {
                  xmlHttp = new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
              } catch(e) {
                  try {
                      xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
                  } catch(e) {
                      try {
                          xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                      } catch(e) {
                          alert("No AJAX!?");
                          return false;
                      }
                  }
              }

              xmlHttp.onreadystatechange = function() {
                  if(xmlHttp.readyState == 4) {
                      document.getElementById('main_container').innerHTML = xmlHttp.responseText;
                  }
              }
          }

function updateAjax(mypage) {
            var t=mypage;
            //alert(t);
                  if(t=="")
                  {
                      //alert("Welldone");   
                  }
                  else
                  {
                      xmlHttp.open("GET", t, true);
                      xmlHttp.send(null);
                  }
          }

window.onload = function() {
              initAjax();
          }
        </script>

        <div id="main_container" style="position: relative;">

        </div>

        <script src="../js/jquery.min.js"></script>
        <script src="../js/bootstrap.min.js"></script>
        <script src="../js/docs.min.js"></script>
        <script src="../js/jRating.jquery.js"></script>

        <script type="text/javascript">
          $("#main_container").load("home.html");
        </script>

http://stackoverflow.com/questions/2990518/jquery-load-not-working-in-chrome — 4b0, Mar 18 '14 at 12:08
Why are you using XMLHttpRequest and ActiveXObject if you have jQuery available? — row1, Mar 18 '14 at 12:53

score 0 · Answer 1 · answered Mar 18 '14 at 12:18

Here is your answer.. Try to use this..

 <script>
      var xmlHttp;
      function initAjax() {
          try {
              xmlHttp = new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
          } catch(e) {
              try {
                  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
              } catch(e) {
                  try {
                      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                  } catch(e) {
                      alert("No AJAX!?");
                      return false;
                  }
              }
          }

          xmlHttp.onreadystatechange = function() {
              if(xmlHttp.readyState == 4) {
                  document.getElementById('main_container').innerHTML = xmlHttp.responseText;
              }
          }
      }

function updateAjax(mypage) {
        var t=mypage;
        //alert(t);
              if(t=="")
              {
                  //alert("Welldone");   
              }
              else
              {
                  xmlHttp.open("GET", t, true);
                  xmlHttp.send(null);
              }
      }

window.onload = function() {
          initAjax();
      }
    </script>

    <div id="main_container" style="position: relative;">

    </div>

    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/docs.min.js"></script>
    <script src="../js/jRating.jquery.js"></script>

    <script type="text/javascript">
     $(document).ready(function(){
      $("#main_container").load("home.html"); }); 
    </script>

I had a similar problem. Try to host in the server and load. it will work fine. If you try to load the page from local chrome will not display it correctly. — Vijayakumar, Mar 19 '14 at 04:42

score 0 · Answer 2 · answered Jun 23 '14 at 23:21

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

JQuery .load() method isn't working in Google Chrome browser

2 Answers2

Linked