confused and dazed 9 Posted June 5, 2013 Report Share Posted June 5, 2013 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!!! Quote Link to post Share on other sites
justsomeguy 1,135 Posted June 5, 2013 Report Share Posted June 5, 2013 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). Quote Link to post Share on other sites
confused and dazed 9 Posted June 5, 2013 Author Report Share Posted June 5, 2013 I looked at the innerHTML examples on w3Schools and they were not much help. I would like to load several block elements (not change the links) into the middle <div> element (the 500x500 one).How would I go about extracting the code inside a body element of an external file? Quote Link to post Share on other sites
justsomeguy 1,135 Posted June 5, 2013 Report Share Posted June 5, 2013 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. Quote Link to post Share on other sites
confused and dazed 9 Posted June 5, 2013 Author Report Share Posted June 5, 2013 I will give it a shot... Quote Link to post Share on other sites
davej 251 Posted June 5, 2013 Report Share Posted June 5, 2013 Are you sure you don't want an iframe? http://www.w3schools.com/tags/tag_iframe.asp Quote Link to post Share on other sites
confused and dazed 9 Posted June 6, 2013 Author Report Share Posted June 6, 2013 iframe looks exciting!!! I tried it and I think I will use it!!! Thanks. I will still need to code some java and css to make the button selection work but I think I can get there... Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.