Includin a file: jQuery based Ajax vs jQuery-append plus hidden iframe

[molendijk]

From a performance point of view, is this

<script>
$(document).ready(function() {
$('#some_div').load('some_file.html')
});
</script>

better than this?

<script>
function include_using_iframe_and_jquery(url,id)
{
$('html').append('<iframe src="'+ url +'" name="framename" style="position:absolute; width:0px; height:0px; left:-10000px" onload="$(&quot;#'+ id +'&quot;).empty(); $(&quot;#'+ id +'&quot;).append(frames[\'framename\'].document.documentElement.innerHTML)"></iframe>')
}
window.onload=include_using_iframe_and_jquery('some_file.html','some_div')
</script>

Thanks,
Arie.

[jscheuer1]

Do you mean speed? I imagine that would vary a bit each time each is used, but a pattern might emerge if you tested it many times. And whether or not the fetched page is cached would matter. You can turn caching off in jQuery for load by using the global jQuery ajax object, and can add a query string from new Date().getTime() each time to the iframe URL to prevent it from being cached.

You can test by checking the time before start and the time once the content arrives and subtracting. If you set up a loop to do it - say 100 times, you could put the information into an array and average it as well as look for fastest/slowest times for each method.

The load, at least the way you have it there should be a little faster because it's on document ready, the iframe code you have there waits for window.onload. On a very simple page there would be little if any difference, but with lots of content, especially images, ready is much sooner than onload.

Using window.onload the way you do there is subject to conflict with other scripts wanting to use it in that way. Document ready is not.

If you mean the nature of the exact content retrieved and how that would behave, you could experiment and see.

[molendijk]

Thanks, John. So apart from speed and script lenght there shouldn't be too much difference between the two scripts (I know how to handle conflicting onloads).
One of the reasons I asked my question is that a client of mine (well, a friend, actually) wanted to include pages containing lots of foreign characters. As my experience is that Ajax doesn't handle them very well, I looked for another safe way to include files. I ended up with a solution using a hidden iframe (see above).
Thanks again,
Arie.

[jscheuer1]

If it works, that's fine.

For speed and to avoid conflicts, you could do the iframe on document ready.

Since you seem to be getting into jQuery, if you use it's .ajax() method, you should be able to control the encoding. The only real problem could be if the server isn't set up to accept the headers. Most are, some will refuse and put their default encoding on it. If this is UTF-8, generally that's OK as long as your pages, both the imported and the 'top' page are UTF-8 as well. But often in situations like that the server is in a more limiting encoding. The ,htaccess or other server side configuration can be used to remedy the situation though. As I say, that's only when the server is set up not to allow your encoding headers on requests. Usually that's not the case.

See:

http://api.jquery.com/jQuery.ajax/

I believe the way to set the encoding is with the accepts property.

[molendijk]

John,
Strangely enough, the jQuery-append plus hidden iframe method seems better if we want to avoid the flicker on page transition with IE9 and Google Chrome, see this, cf. this thread.
Arie.