页面无法执行$（“＃..”）。load（）

Question

Functionality:

When Users tap on an image button, it is suppose to bring the user from the current page to the next page.

What has been done:

I have made use of jQuery method call: .load(url) , hence the syntax will look something like : $("#divID").load("***.html");

Issue:

When I clicked on the image button, it gives the following error msg:

XMLHttpRequest cannot load
jquery-1.11.3.min.js:5 file:///Users/trinax/Documents/Ernest/Project/ToysRUs/ToyRUs(main)/TapAStar.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

and furthermore, the resultant page is blank and doesn't display anything.

what has gone wrong?please help

 $("#tapButton").click(function() { // Enter Link here (Tap A Star Game) $("#load_tapGame").load("Tap.html"); $("#menu").fadeOut(function() { $("#load_tapGame").fadeIn(); }) }) 

 <div id="load_tapGame"></div> <div id="menu"> <img style="position: absolute; top: 2150px; left: 185px; z-index: 2" src="library/image/tapAStarButtonCloud.png" /> <div class="button"> <button id="tapButton" class="buttonProperty"> <img src="library/image/tapButton.png" /> </button> </div> </div> 

Answer 1

You need to use a server. Trying to load things using javascript when working locally will fail due to CORS. https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

I like to use Live Server for local testing. You can find instructions on how to install it using npm here: https://github.com/tapio/live-server

You can find instruction on installing npm (Node Package Manager) here: https://nodejs.org/en/download/