Load HTML page dynamically into div with jQuery

Question

I m trying to make it so when I click on a link in a HTML page  it dynamically loads the requested page into a div with jQuery   How can I do that    lt html gt   lt head gt   lt script type  text javascript  gt         what can I do for load any url clicked   lt  script gt   lt  head gt   lt body gt   lt div id  content  gt  lt  div gt    lt a href  page1 html  gt Page 1 lt  a gt  lt br   gt   lt a href  page2 html  gt Page 2 lt  a gt  lt br   gt   lt a href  page3 html  gt Page 3 lt  a gt  lt br   gt   lt a href  page4 html  gt Page 4 lt  a gt  lt br   gt   lt a href  page5 html  gt Page 5 lt  a gt  lt br   gt   lt a href  page6 html  gt Page 6 lt  a gt  lt br   gt   lt  body gt   lt  html gt

User · Answer

You can through option  Try this with some modifications    lt div trbidi  on  gt   lt script type  text javascript  gt  function MostrarVideo idYouTube    var contenedor   document getElementById  divInnerVideo    if idYouTube         contenedor innerHTML         else  var url   idYouTube  contenedor innerHTML     lt iframe width  560  height  315  src  https   www youtube com embed    url     frameborder  0  allowfullscreen gt  lt  iframe gt         lt  script gt     lt select onchange  MostrarVideo this value    gt   lt option selected disabled gt please selected  lt  option gt   lt option value  qycqF1CWcXg  gt test1 lt  option gt   lt option value  hniPHaBgvWk  gt test2 lt  option gt   lt option value  bOQA33VNo7w  gt test3 lt  option gt   lt  select gt   lt div id  divInnerVideo  gt   lt  div gt    If you want to put a default page placed inside id  divInnerVideo   example    lt div id  divInnerVideo  gt   lt iframe width  560  height  315  src  https   www youtube-nocookie com embed pES8SezkV8w rel 0 amp amp showinfo 0  frameborder  0  allowfullscreen gt  lt  iframe gt   lt  div gt

User · Answer

I think you are looking for the Jquery Load function  You would just use that function with an onclick function tied to the a tag or a button if you like

User · Answer

You can use jQuery s getJSON   or Load    with the latter  you can reference an existing html file  For more details  see http   www codeproject com Articles 661782 Three-Ways-to-Dynamically-Load-HTML-Content-into-a

User · Answer

JQuery load works  but it will strip out javascript and other elements from the source page   This makes sense because you might not want to introduce bad script on your page   I think this is a limitation and since you are doing a whole page and not just a div on the source page  you might not want to use it    I am not sure about css  but I think it would also get stripped   In this example  if you put a tag around the body of your source page  it will grab anything in between the tags and won t strip anything out   I wrap my source page with  and    This solution will grab everything between the above delimiters   I feel it is a much more robust solution than a simple load     var content       contentDiv        content load urlAddress  function  response  status  xhr            var fullPageTextAsString   response          var pageTextBetweenDelimiters   fullPageTextAsString substring fullPageTextAsString indexOf   lt jqueryloadmarkerstart   gt     fullPageTextAsString indexOf   lt jqueryloadmarkerend   gt              content html pageTextBetweenDelimiters

User · Answer

There s a jQuery plugin out there called pjax it states   It s ajax with real permalinks  page titles  and a working back button that fully degrades    The plugin uses HTML5 pushState and AJAX to dynamically change pages without a full load  If pushState isn t supported  PJAX performs a full page load  ensuring backwards compatibility   What pjax does is that it listens on specified page elements such as  lt a gt   Then when the  lt a href    gt  lt  a gt  element is invoked  the target page is fetched with either the X-PJAX header  or a specified fragment   Example    lt script type  text javascript  gt      document  pjax  a     pjax-container     lt  script gt    Putting this code in the page header will listen on all links in the document and set the element that you are both fetching from the new page and replacing on the current page    meaning you want to replace  pjax-container on the current page with  pjax-container from the remote page   When  lt a gt  is invoked  it will fetch the link with the request header X-PJAX and will look for the contents of  pjax-container in the result  If the result is  pjax-container  the container on the current page will be replaced with the new result    lt  DOCTYPE html gt   lt html gt   lt head gt     lt script type  text javascript  src  jquery min js  gt  lt  script gt     lt script type  text javascript  src  jquery pjax js  gt  lt  script gt      lt script type  text javascript  gt        document  pjax  a     pjax-container       lt  script gt    lt  head gt   lt body gt     lt h1 gt My Site lt  h1 gt     lt div class  container  id  pjax-container  gt      Go to  lt a href   page2  gt next page lt  a gt      lt  div gt   lt  body gt   lt  html gt    If  pjax-container is not the first element found in the response  PJAX will not recognize the content and perform a full page load on the requested link  To fix this  the server backend code would need to be set to only send  pjax-container   Example server side code of page2     if header X-PJAX    true in request headers  send  lt div class  container  id  pjax-container  gt    Go to  lt a href   page1  gt next page lt  a gt    lt  div gt    else send full page   If you can t change server-side code  then the fragment option is an alternative     document  pjax  a     pjax-container        fragment    pjax-container         Note that fragment is an older pjax option and appears to fetch the child element of requested element

User · Answer

Try with this one     document  ready function         a   click function e        e preventDefault             content   load   this  attr  href                 and make sure to call this library first    lt script src  https   ajax googleapis com ajax libs jquery 1 9 0 jquery min js  gt   lt  script gt

User · Answer

I think this would do it    lt html gt   lt head gt   lt script type  text javascript  src  http   ajax googleapis com ajax libs jquery 1 9 0 jquery min js  gt  lt  script gt   lt script type  text javascript  gt        document  ready function                  divlink   click function                 content   attr  src      this  attr  ref                lt  script gt   lt  head gt   lt body gt   lt iframe id  content  gt  lt  iframe gt    lt a href     ref  page1 html  class  divlink   gt Page 1 lt  a gt  lt br   gt   lt a href     ref  page2 html  class  divlink   gt Page 2 lt  a gt  lt br   gt   lt a href     ref  page3 html  class  divlink   gt Page 3 lt  a gt  lt br   gt   lt a href     ref  page4 html  class  divlink   gt Page 4 lt  a gt  lt br   gt   lt a href     ref  page5 html  class  divlink   gt Page 5 lt  a gt  lt br   gt   lt a href     ref  page6 html  class  divlink   gt Page 6 lt  a gt  lt br   gt   lt  body gt   lt  html gt    By the way if you can avoid Jquery  you can just use the target attribute of  lt a gt  element    lt html gt   lt body gt   lt iframe id  content  name  content  gt  lt  iframe gt    lt a href  page1 html  target  content   gt Page 1 lt  a gt  lt br   gt   lt a href  page2 html  target  content   gt Page 2 lt  a gt  lt br   gt   lt a href  page3 html  target  content   gt Page 3 lt  a gt  lt br   gt   lt a href  page4 html  target  content   gt Page 4 lt  a gt  lt br   gt   lt a href  page5 html  target  content   gt Page 5 lt  a gt  lt br   gt   lt a href  page6 html  target  content   gt Page 6 lt  a gt  lt br   gt   lt  body gt   lt  html gt

[javascript] Load HTML page dynamically into div with jQuery

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to css