As a web developer I was asked to render the HTML code of a static HTML file in a div of dynamically generated HTML page. So I found out several alternative solutions.
Solution#1 Parse the static HTML file in the server-side and render only the content that is between "<body>" and "</body>". This solution would cost time to access the file, memory to keep the files content, process to parse the file's content, memory to keep the process result and finally time to send the result to the client.
Solution#2 Keep only the content of the HTML that is between "<body>" and "</body>" in the file in order to avoid process. Again time to access, memory to keep and time to send the result was needed. And additionally we had to edit the static HTML in each update. Cost of maintenance is the first that we try to reduce. We aren't developing a small and static web site but a dynamic web application that may include several static HTML files.
Solution#3 Do whatever is described in Solution#1 but do it in the client's side using ajax. Response is sent including only the javascript call which will retrieve the HTML file and will parse and render it in the right place. No memory needed. Web server handler static HTML file transfer as any other file's.
Solution#4 Do whatever is described in Solution#3 but additionally retrieve which are the included style sheet and javascript files and include them. So the web designer gives you the whole set of HTML Code, Style Sheet files [CSS], JavaScript code [JS] and other resources [images, flash and whatever] and you simple add a small ajax call that retrieved the HTML and renders it in a given div.
NOTE: I combined code from two sources "
Dynamic Ajax Content [Dynamic Drive DHTML Script]" and "
XUL Ajax" and I also added a piece of code to make it possible to retrieve which .js and .css files are included in the static file in order to add them in the container HTML via ajax.
In order to use the javascript you should add in the container HTML the following:
<div id="storage" style="display:none;"></div>
<div id="displayed"></div>
<script type="text/javascript">
document.onload=ajaxpage('YOU_STATIC_PAGE.html','displayed');
</script>
and you should also include the "
AjaxPage.js" in the header of the container.
In case you have any problem using the javascript simply leave a comment and I will help you as soon as possible.
Sources:
Files:
