Jump to content

I would like to load an external html into a <div> element


Recommended Posts

Hello internet - here is what I would like to do: I want to load an html file into a <div> element in my current html file.I have several buttons on my webpage where I would like to be able to click the button so that the <div> element that I placed in the middle of the page (which is sort of large 500px by 500px) will display a dynamic file where I would have more buttons and <a href> links and anything that html page would have coded in it. Where should I start? You help as always is appreciated!!!

Link to post
Share on other sites

Obviously it's not correct to put an entire page's HTML content inside another element, for example you can't have the <html>, <head>, <body> etc elements (which means you'll leave out the stylesheets and scripts linked in the head). But if you have the source that you want to put on your page you can just set the element's innerHTML property. If you have an entire page that you need to get the body content from then it's probably easiest to use a regular expression to extract everything inside the body element (excluding the actual body tags).

Link to post
Share on other sites

Obviously first you need to load the file, which you can do via ajax as long as it is on your server. If it's on a remote server you'll need to use a PHP proxy with ajax. After that, you just need a regular expression to match everything between the body tags. I'm sure you can find several examples of that online. If you're going to use a PHP proxy then you might as well process the HTML in PHP and send just the body content to Javascript. Once Javascript has the content then you can set the element's innerHTML property to add it to the page.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...