How to load html page into the main page ?

Question

Suppose I have 2 files: Main.html and Home.html, in Main.html page there is html code with the following menu: class = "container" > "menu" > class = "nav justify-content-center" > class = "nav-item" > class = "nav-link" href= "Home.html" >Home class = "nav-item" > class = "nav-link" href= "#" >ServiceForum class = "nav-item" > class = "nav-link" href= "#" >Question class = "nav-item" > class = "nav-link" href= "#" >Forum class = "nav-item" > class = "nav-link" href= "#" >Contac When I click on "Home" from the menu, the Home.html is opened but not in the green area of the Main.html page, so when I click on "Home" from the menu, how do I edit the above code? In addition, when Home loaded by default is also loaded in the green area, how is the above code written? You see the attached photo file:

Sachin Singh · Answer

there is no chance that it will not work your url must be using either file:// or C:/ , which causes origin policy error, if your html have a url like http://html1.html and http://html2.html then it will work for sure. please check your browser console for errors , i am sure you are getting policy errors.

Ajay Gohil · Answer

Hello, You can use jquery.May following code help you. "jquery.js" > $( function (){ $( "a" ).click( function (){ $( "#divId" ).load( "Home.html" ); }); });

Jignesh Kumar · Answer

Hi, You can use below code, "jquery.js" > $(function(){ $( "#includedContent" ).load( " Home.html " ); }); "includedContent" >

Ashutosh Gupta · Answer

Home $("divId").click(function (e) { e.preventDefault(); $("#GreenArea").load("g.html");

Dong Lam Trien · Answer

I checked my browser, everything normal

Dong Lam Trien · Answer

Hello Sachin Singh! I use Sublime Text 3 to design the interface of the program, if the program runs well I will switch to asp.net. I ran your code, it didn't load in the green area, I see the words Load ... in the menu area, you see the results of my image https://www.mediafire.com/view/4efa8sxj64fysyh/DesignLoadItemWebEn2.jpg/file

Sachin Singh · Answer

it is working fine in my case, please check browser (inspect and watch console errors) , you might be getting cors policy error Example load html in main page "utf-8" > "viewport" content= "width=device-width, initial-scale=1" > "stylesheet" href= "bootstrap453/css/bootstrap.min.css" > "stylesheet" type= "text/css" href= "css/style07.css" > "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" > "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js" > "bootstrap453/js/bootstrap.min.js" > class = "container" > "menu" > class = "nav justify-content-center" > class = "nav-item" > class = "nav-link" href= "#" id= "homeNav" >Home class = "nav-item" > class = "nav-link" href= "#" >ServiceForum class = "nav-item" > class = "nav-link" href= "#" >Question class = "nav-item" > class = "nav-link" href= "#" >Forum class = "nav-item" > class = "nav-link" href= "#" >Contac Load... "GreenArea" > $( "#homeNav" ).click(function (e) { debugger; e.preventDefault(); $( "#GreenArea" ).load( "home.html" ); });

Dong Lam Trien · Answer

I followed your instructions but nothing is running? here is my code: Your Way Sachin Singh [CODE] Example load html in main page Home ServiceForum Question Forum Contac $("#homeNav").click(function(){ $("#GreenArea").load(home.html); }); ... [/CODE] Your Way Ajay Gohil [CODE] Example load html in main page $(function(){ $("a").click(function(){ $("#divId").load("Home.html"); }); }); Home ServiceForum Question Forum Contac ... [/CODE] Your Way Jignesh Kumar [CODE] Example load html in main page $(function(){ $("#includedContent").load("Home.html"); }); Home ServiceForum Question Forum Contac ... [/CODE]

Sachin Singh · Answer

"container" > "menu" > "nav justify-content-center" > "nav-item" > "nav-link" href= "Home.html" id= "homeNav" >Home "nav-item" > "nav-link" href= "#" >ServiceForum "nav-item" > "nav-link" href= "#" >Question "nav-item" > "nav-link" href= "#" >Forum "nav-item" > "nav-link" href= "#" >Contac GreenArea "> $( "#homeNav" ).click(function(){ $( "#GreenArea" ).load(home.html); });