javascript - Unable to link js file to html to load local files -


what i'm trying do

load html file content block on page .load function in linked .js file using local server.

what i'm using

html
css
javascript/jquery
wamp
chrome
windows 10

the problem

i can inside page, can't working when using linked files (as matter of fact, can't any javascript work when use linked files), , i'd rather able maintain separate .js file.

what i've done

  • checked spelling
  • checked file paths
  • read similar questions , comments (didn't help)
  • restarted computer (why not?)
  • before using wamp, tried starting chrome local file access allowed. worked several minutes... until didn't anymore.

notes

  • i'm new javascript , jquery.
  • the linked .css files have never given me trouble.
  • yes, nav.html in same directory index.html.
  • yes, js folder in same directory index.html, , design.js indeed inside folder.
  • wamp icon green , able set virtualhost succesfully.

code doesn't work me

index.html

<html>   <head>     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>     <script src="js/design.js"></script>   </head>   <body>     <header>     </header>     <nav>     </nav>     <article>       <section>       </section>     </article>     <footer>     </footer>   </body> </html> 

design.js

$(document).ready(function() {      loadnav();  });  function loadnav(){      $('nav').load('nav.html');  } 

or

design.js

$(document).ready(function() {      $('nav').load('nav.html');  }); 

code works me

index.html

<html>   <head>     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>     <script>       $(document).ready(function(){          $('nav').load('nav.html');        });     </script>   </head>   <body>     <header>     </header>     <nav>     </nav>     <article>       <section>       </section>     </article>     <footer>     </footer>   </body> </html> 

or

index.html

<html>   <head>     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>   </head>   <body>     <header>     </header>     <nav>     </nav>     <article>       <section>       </section>     </article>     <footer>     </footer>     <script>         $('nav').load('nav.html');     </script>   </body> </html> 

if open console you'll see

xmlhttprequest cannot load file:///.../nav.html. cross origin requests supported protocol schemes: http, data, chrome, chrome-extension, https. 

it's browser politics. works in firefox, not in chrome. if want work may run web server on local machine serve files.

more information:

xmlhttprequest cannot load file. cross origin requests supported http

"cross origin requests supported http." error when loading local file


Comments

Popular posts from this blog

ubuntu - PHP script to find files of certain extensions in a directory, returns populated array when run in browser, but empty array when run from terminal -

php - How can i create a user dashboard -

javascript - How to detect toggling of the fullscreen-toolbar in jQuery Mobile? -