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:
<DIV id="container_div">
<!-- The first div child in this container has a header image to
be displayed above the iframe's content -->
<DIV>
<IMG src="abc.gif" />
</DIV>
<!-- This is the place where i need my iframe to fit it -->
<!-- The last P child has some footer text to appear below the iframe -->
<P id="some_footer">
<SPAN> Some Text </SPAN>
</P>
</DIV>
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);
</#if>
});
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 = '<iframe src="http://www.myserver.com";></iframe>';
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!
