[jQuery] IFrame caching in Firefox
Hello,
I am using a jQuery script to insert iframe in the document after the
page load completes as follows:
jQuery(window).load(function() {
var container = jQuery(‘#container_id”);
jQuery(‘’).prependTo(container);
});
Apparently there is a problem (or probably a speed-up trick) with
Firefox where it tries to cache any iframe content so that next time
when you come back to the page (using forward or back button), it
fetches the content of the iframe from its cache rather than making a
new request. This is a problem to my usecase as the number of request
received by the server is of high importance.
Hence to get around this caching issue I have a small piece of
cache-busting code just after prependTo() call above, which forces a
reload of the iframe is as follows:
if ((navigator.userAgent.indexOf("Firefox") > -1) &&
(navigator.userAgent.indexOf("Windows") > -1)) {
var i = document.getElementById("my_iframe");
if (i) {
i.src="www.some-url.com";
}
}
I read somewhere that when we add iframes to the DOM dynamically, it
actually takes some amount of time before which it can be queried
using the standard DOM manipulation function. So, I am suspecting that
for most of the time my cache-busting code above does not do anything,
but it’s hard to spot the error as it could be happening only 1 in 10
times or less.
My question is, would using jQuery’s selector to get the iframe node
for cache-busting help me get around this iframe-ready-to-query delay?
I just want to ensure that my cache-busting code runs every time its
meant to run.
I appreciate any help.
Thanks,
[jQuery] Using jQuery to insert IFrame dynamically after page loads.
Hello,
I have a use case in which I need to insert an IFrame as a child to an
existing DIV just after the page load completes. That is, the request
to fetch content for this Iframe should go to the server "after" all
the media in the page has loaded, basically after the page "load"
event and not the document ready event.
My document structure is as follows:
Some Text
The structure of the document is such that both the header (the first
DIV child above) and the footer (the last P child above) may or may
not be present in the final document sent by the server. Thus i wrote
a jQuery script as follows:
jQuery(window).load(function() {
var divContainer = jQuery('#container_div');
<#if header_present??>
jQuery('#container_div').children('div:first').after('${iframeContent}');
<#else>
jQuery('${iframeContent}').prependTo(divContainer);
});
The decision of whether the header or footer is present is done using
Freemarker that is aside from the topic of this discussion. Basically,
i see if the header is present then add the iframe after the header
div and if not, just add it as the first child. Here ${iframeContent}
is a variable that stores the iframe tag as a text like:
$iframeContent = 'http://www.myserver.com";>';
My script runs fine but just that it fails sometimes (10 in a 100)
because of reasons I am finding out here. I wanted your opinion on the
following:
1. Using jQuery(window).load: Is it a good way to capture onload event
of the page? Or do we have a robust way to capture page loads?
2. Is the sandwiching logic of the iframe the correct way to do it or
could it fail in any scenario?
I appreciate any help in this issue.
Thanks!
