confused and dazed Posted June 5, 2013 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!!! Link to comment Share on other sites More sharing options...
justsomeguy Posted June 5, 2013 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). Link to comment Share on other sites More sharing options...
confused and dazed Posted June 5, 2013 Author 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? Link to comment Share on other sites More sharing options...
justsomeguy Posted June 5, 2013 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. Link to comment Share on other sites More sharing options...
confused and dazed Posted June 5, 2013 Author Share Posted June 5, 2013 I will give it a shot... Link to comment Share on other sites More sharing options...
davej Posted June 5, 2013 Share Posted June 5, 2013 Are you sure you don't want an iframe? http://www.w3schools.com/tags/tag_iframe.asp Link to comment Share on other sites More sharing options...
confused and dazed Posted June 6, 2013 Author 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... Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now