Jump to content

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


confused and dazed
 Share

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 comment
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 comment
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 comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...