How do I load an HTML page in a div using JavaScript

Question

I want home html to load in  lt div id  content  gt        lt div id  topBar  gt   lt a href      onclick  load home    gt  HOME  lt  a gt   lt  div gt   lt div id   content  gt   lt  div gt   lt script gt        function load home                document getElementById  content   innerHTML   lt object type  type html  data  home html   gt  lt  object gt         lt  script gt    This works fine when I use Firefox  When I use Google Chrome  it asks for plug-in  How do I get it working in Google Chrome

User · Answer

You can use the jQuery           topBar   on  click  function                content   load  content html

User · Answer

There is this plugin on github that load content into an element  Here is the repo  https   github com abdi0987 ViaJS

User · Answer

I saw this and thought it looked quite nice so I ran some tests on it   It may seem like a clean approach  but in terms of performance it is lagging by 50  compared by the time it took to load a page with jQuery load function or using the vanilla javascript approach of XMLHttpRequest which were roughly similar to each other    I imagine this is because under the hood it gets the page in the exact same fashion but it also has to deal with constructing a whole new HTMLElement object as well    In summary I suggest using jQuery  The syntax is about as easy to use as it can be and it has a nicely structured call back for you to use  It is also relatively fast  The vanilla approach may be faster by an unnoticeable few milliseconds  but the syntax is confusing  I would only use this in an environment where I didn t have access to jQuery   Here is the code I used to test - it is fairly rudimentary but the times came back very consistent across multiple tries so I would say precise to around  - 5ms in each case  Tests were run in Chrome from my own home server    lt  DOCTYPE html gt   lt html gt   lt head gt       lt script src  https   code jquery com jquery-2 1 4 min js  gt  lt  script gt   lt  head gt   lt body gt       lt div id  content  gt  lt  div gt       lt script gt                        Test harness to find out the best method for dynamically loading a           html page into your app                     var test times                var test page      testpage htm           var content div   document getElementById  content                TEST 1   use jQuery to load in testpage htm and time it                     function test                          var start   new Date   getTime                  content div  load test page  function                     alert new Date   getTime   - start                                         1044                        TEST 2   use  lt object gt  to load in testpage htm and time it                     function test                          start   new Date   getTime                content div innerHTML     lt object type  text html  data      test page                  onload  alert new Date   getTime   - start   gt  lt  object gt                        1579                        TEST 3   use httpObject to load in testpage htm and time it         function test                        var xmlHttp   new XMLHttpRequest                xmlHttp onreadystatechange   function                     if  xmlHttp readyState    4  amp  amp  xmlHttp status    200                                       content div innerHTML   xmlHttp responseText                     alert new Date   getTime   - start                                                 start   new Date   getTime                 xmlHttp open  GET   test page  true      true for asynchronous             xmlHttp send null                   1039                       Main - run tests         test          lt  script gt   lt  body gt   lt  html gt

User · Answer

You can use the jQuery load function    lt div id  topBar  gt       lt a href      id  load home  gt  HOME  lt  a gt   lt  div gt   lt div id   content  gt           lt  div gt    lt script gt    document  ready  function             load home   on  click   function                 content   load  content html                 lt  script gt    Sorry   Edited for the on click instead of on load

User · Answer

try  async function load home      content innerHTML   await  await fetch  home html    text         x000D   x000D  async function load home     x000D    let url    https   kamil-kielczewski github io fractals mandelbulb html  x000D   x000D    content innerHTML   await  await fetch url   text    x000D    x000D   lt div id  topBar  gt   lt a href     onclick  load home    gt  HOME  lt  a gt   lt  div gt  x000D   lt div id  content  gt   lt  div gt  x000D   x000D   x000D

User · Answer

I finally found the answer to my problem  The solution is   function load home          document getElementById  content   innerHTML   lt object type  text html  data  home html   gt  lt  object gt

User · Answer

showhide html   lt  DOCTYPE html gt   lt html gt       lt head gt         lt script type  text javascript  gt          function showHide switchTextDiv  showHideDiv                      var std   document getElementById switchTextDiv             var shd   document getElementById showHideDiv             if  shd style display     block                           shd style display    none               std innerHTML     lt span style   display  block  background-color  yellow   gt Show lt  span gt                           else                         if  shd innerHTML length  lt   0                              shd innerHTML     lt object width   100    height   100    type   text html   data   showhide embedded html   gt  lt  object gt                              shd style display    block               std innerHTML     lt span style   display  block  background-color  yellow   gt Hide lt  span gt                                 lt  script gt       lt  head gt       lt body gt         lt a id  switchTextDiv1  href  javascript showHide  switchTextDiv1    showHideDiv1    gt           lt span style  display  block  background-color  yellow  gt Show lt  span gt         lt  a gt         lt div id  showHideDiv1  style  display  none  width  100   height  300px  gt  lt  div gt       lt  body gt   lt  html gt    showhide embedded html   lt  DOCTYPE html gt   lt html gt       lt head gt         lt script type  text javascript  gt           function load                       var ts   document getElementById  theString              ts scrollIntoView true                    lt  script gt       lt  head gt       lt body onload  load    gt         lt pre gt          some text 1         some text 2         some text 3         some text 4         some text 5          lt span id  theString  style  background-color  yellow  gt some text 6 highlight lt  span gt          some text 7         some text 8         some text 9        lt  pre gt       lt  body gt   lt  html gt

User · Answer

If your html file resides locally then go for iframe instead of the  tag   tags do not work cross-browser  and are mostly used for Flash   For ex    lt iframe src  home html  width  100  height  100   gt

User · Answer

Fetch API  function load home  e         e    window event  preventDefault         fetch  http   www yoursite com home html      options          then  response    gt  response text         then  html    gt            document getElementById  content   innerHTML   html              catch  error    gt            console warn error                XHR API  function load home  e       e    window event  preventDefault      var con   document getElementById  content         xhr   new XMLHttpRequest       xhr onreadystatechange   function  e         if  xhr readyState    4  amp  amp  xhr status    200          con innerHTML   xhr responseText               xhr open  GET    http   www yoursite com home html   true     xhr setRequestHeader  Content-type    text html      xhr send        based on your constraints you should use ajax and make sure that your javascript is loaded before the markup that calls the load home   function  Reference - davidwalsh  MDN - Using Fetch  JSFIDDLE demo

User · Answer

This is usually needed when you want to include header php or whatever page    In Java it s easy especially if you have HTML page and don t want to use php include function but at all you should write php function and add it as Java function in script tag   In this case you should write it without function followed by name  Just  Script rage the function word and start  the include header php I e convert the php include function to Java function in script tag and place all your content in that included file

User · Answer

button   click function             target div   load  requesting page url html          or   document getElementById  target div   innerHTML   lt object type  text html  data  requesting page url html  gt  lt  object gt

User · Answer

lt script gt  var insertHtml   function  selector  argHtml      document  ready function           selector  load argHtml         var targetElem   document querySelector selector       targetElem innerHTML   html      var sliderHtml  quot snippets slider html quot    url of slider html var items  quot snippets menuItems html quot   insertHtml  quot  main quot  sliderHtml   insertHtml  quot  main2 quot  items    lt  script gt   this one worked for me when I tried to add a snippet of HTML to my main html  Please don t forget to add ajax in your code pass class or id as a selector and the link to the HTML snippet as argHtml

User · Answer

When using       content   load  content html      Then remember that you can not  debug  in chrome locally  because XMLHttpRequest cannot load -- This does NOT mean that it does not work  it just means that you need to test your code on same domain aka  your server

User · Answer

Use this simple code   lt div w3-include-HTML  content html  gt  lt  div gt   lt script gt w3 includeHTML    lt  script gt   lt  body gt

User · Answer

Fetching HTML the modern Javascript way  This approach makes use of modern Javascript features like async await and the fetch API  It downloads HTML as text and then feeds it to the innerHTML of your container element            param  String  url - address for the HTML to fetch      return  String  the resulting HTML string fragment      async function fetchHtmlAsText url        return await  await fetch url   text          this is your  load home   function  async function loadHome         const contentDiv   document getElementById  content        contentDiv innerHTML   await fetchHtmlAsText  home html        The await  await fetch url   text   may seem a bit tricky  but it s easy to explain  It has two asynchronous steps and you could rewrite that function like this   async function fetchHtmlAsText url        const response   await fetch url       return await response text        See the fetch API documentation for more details

[javascript] How do I load an HTML page in a <div> using JavaScript?

Examples related to javascript

Examples related to html

Examples related to google-chrome