Embedding dynamically sized webpage with javascript

Okay, so first some background info: I am trying to embed a webpage within another page. The sub-page is basically a small web application written in javascript and html that takes in several screens of input (radio button开发者_如何学运维s, text boxes, etc.) and gives a screen with results at the end. Each of these screens can be a different size.

There are two methods I have tried using to do the embedding:

1) Copy all of the html and javascript from the sub-page into the main page and stick it in a div/table/whatever.

2) Keep the sub-page in its own file and embed it using embed/object/iframe.

Using the first method the page behaves as it should; the only real problem (aside from being kind of a messy solution) is that the sub-page I am embedding is actually generated by an external application, and every so often the page is replaced with a newer version. This more or less rules out using the first method as a long-term solution.

Now the second method has its own problems. Since the embedded javascript page changes in height, the frame that is holding it needs to vary in size with it. I'm able to change the size using any of the solutions given here, however these do not update the size of the frame as the user progresses through each screen.

The closest solution I've been able to come up with so far is using a document.onclick handler to catch any clicking which might cause the next screen of the sub-page to come along. The handler pauses for a very short time (to allow the next screen to come up) and then calls the necessary resizing function. However this feels like a very hacky solution, and there is also a slightly noticeable delay during with the scroll bar shows up on the side of the frame when it hasn't expanded yet to fit the new content. I'm thinking there must be a better way to do this.

If the file is on the same server/domain, you could just load it in with jQuery. Here is some jQuery code:

<script type="text/javascript">
$(document).ready(function() {
$('#id-of-div').load('/path/to/page.html');
});
</script>

Just change id-of-div to the id of the div that you want the page to be loaded into and change /path/to/page.html to the actual URL to the page. (you don't need the domain of it, just the path to it)

I hope this helps.

If this answers your question, please remember to click the checkmark next to this to accept this answer.