Results 1 to 5 of 5

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

  1. #1
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,380
    Thanks
    31
    Thanked 148 Times in 142 Posts
    Blog Entries
    33

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

    From a performance point of view, is this
    Code:
    <script>
    $(document).ready(function() {
    $('#some_div').load('some_file.html')
    });
    </script>
    better than this?
    Code:
    <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.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,069
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    molendijk (08-25-2012)

  4. #3
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,380
    Thanks
    31
    Thanked 148 Times in 142 Posts
    Blog Entries
    33

    Default

    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.

  5. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,069
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #5
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,380
    Thanks
    31
    Thanked 148 Times in 142 Posts
    Blog Entries
    33

    Default

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •