composit web-page from multiple requests

Question

I am trying to design a web application. Because of the way I am doing it, it is difficult to put all of the information onto one page (multiple database look-ups). I have created a proto-type that uses iframes: one for <nav> one for <aside>, one for the main bit, etc. It can not format the iframes, as I want them (sizing). Apparently, iframes can't do what I want.

Is there a way to get the same affect: What seems to be a single web-page, but in reality a composite of many.

Solutions that I have considered:

• I am doing iframes wrong: tell me how to do them correct.
• I should be using a different tag: tell me which.
• Use a compositing reverse-proxy on server (maybe converts iframes to in-line html).
• Do compositing using javascript, on client (I have been trying to avoid javascript on most pages, as it is sometimes disabled, for security reasons.)
• xslt, on client: I just thought of this when writing previous bullet point, and have no idea, yet, if it can do it.

I have tried the first 2, and can not find anything about the 3rd.

---

I am using couchdb, I do not want to include to much into each view as it will trigger cache invalidation for the whole page, if something changes. Because of filter ranges, I think this will happen even if it is data that is not relevant for the page.

Answer 1

Just because you are pulling data from multiple databases doesn't mean you have to use iframes or anything like that.

Create an object for each data set and included them in the page using DIVs as you would if you were using a single database.

I think you are making it more complicated that the project needs to be.

Answer 2

IFrames are a messy method of importing content from one page into another which are used far to frequently for the wrong reasons in my opinion.

For what you are wanting to achieve here you would be better off building the page using AJAX.

What you would do is define the basic page structure with <div></div> tags named for the specific parts of the page they handle. At the end of the page load you would run a series of parallel AJAX requests back to the server to get this data from the various pages on the server that the data comes from and then populate the div's with that AJAX obtained content. By doing this effectively all the content resides on the same page within the document object model and can be worked on as if it all was sent to the browser as a single page to begin with.

NB: I do this quite frequently with web applications that I write where data from multiple disparate sub systems (within the same web server) is being pulled onto one page. For simplicity sake I called it "pagelets" and did it as a jQuery loop where I go through the page and for each div I gave a .pagelet class to I attached a on page ready event to run and do an AJAX fetch to fill the <div> with the contents of the page (where the link was defined in the div as a data-url attribute).