alternatives to frames to include content from different servers

I need to make a series of webpages. Each with a header coming from a website, and the content coming from an html page in my dropbox/public. I simple way would be to use frames, but they are deprecated.

As the html content is o开发者_高级运维f different size. So the iFrame does not seem to be the right tool.

What alternatives do I have?

Many people seemed to suggest in the comments ajax with jsonp. Unfortunately I am completely new to those methods, so I would need an example to copy and then work with.

Thanks, Pietro

You need to have the Jquery library in the main page. Copy the above code on the header of your page:

<script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>

The make a div with the response id:

<div id="response"></div>

JQuery has an AJAX function called "load", this function is appended to a selector where you want a page to be loaded, in this case we want to contents of file "exemple.html" to load in the tag with id "response".

<script>

$(document).ready(function(){
    // load exemple page when the page loads
    $("#response").load("exemple.html");
});

</script>

Also you can load the content when a link from the main page is clicked:

<script>

$("#exemple").click(function(){
    // load exemple page on click
        $("#response").load("exemple.html");
    });

</script>

For this you have to add on your HTML code a link with the id="exemple"

<a href="#" id="exemple">Click to load the exemple page</a>

Hope this helps you!