As I think the most “famous” approach is to use jQuery
$( document ).ready(). The code will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.Another function,
$( window ).load(function() { ... }) will run once the entire page (images or iframes), not just the DOM, is ready.Typical “plain” javascript replacement for
$(document).ready() looks like:document.addEventListener("DOMContentLoaded", function() {
// code...
});
But for IE8 and older you should use:document.attachEvent("onreadystatechange", function(){
if (document.readyState === "complete"){
document.detachEvent( "onreadystatechange", arguments.call );
// code ...
}
});
If we need call our function after full page load (with images and so on) we can use window.load which is “replacement” for $( window ).load().Ok. But what with ADF? Of course we can use any of above approaches. But we have also dedicated ADF mechanism.
We could use an ADF clientListener operation with load type, to identify when ADF UI is loaded. This listener should be added to the ADF UI document tag and it will be invoked at the end of page rendering. Through clientListener, we could invoke our custom JavaScript method:
…
<f:facet name=”metaContainer”>
<af:resource type=”javascript”>
Function myCustomMethod(){
alert(“Page loaded !!!”);
}
</af:resource>
</f:facet>
<af:clientListener type=”load” method=”myCustomMethod”/>
</af:document>
</f:view>
