Often encounter such a scenario:
embedded in another page when the iframe. If the iframe load pages faster response, maybe we do not feel out of sync page load, but imagine, in response iframe page if need be embedded into a very slow, there will be What kind of phenomenon? Then there will be all the page has finished loading, but at the iframe element, there will be blank until the embedded page finished loading, this space will display the newly loaded page.
One can imagine that a blank page if prolonged, for the viewer, it will mean anything.
If embedded in the page is not finished loading, to give a loaded message. Such as: "Page Loading" and the like, I think this page to browse users, will no longer be suffering, but also to enjoy a visual.
To achieve this effect, generally follows the principle of processing.
iframe load area gives friendly message
When the iframe has finished loading, clear message, and let the iframe is displayed
These are relatively easy, but the key question now is how to listen pages within the iframe element is already loaded.
The key to this problem, in general, will be divided into two cases to discuss solutions.
Nested same domain. The best is to call the parent page subpages methods
If it is exotic, but sub-pages can not be modified, then: In Firefox / Opera / Safari, you can use iframe onload event directly; but in IE, can be measured by a timer document.readyState sub-pages, or calculated using the iframe onreadystatechange event in response to this event
Sympatric nesting
parent.html
function ifrmLoaded() {
// code here
}
sub.html
window.onload = function() {
window.parent.ifrmLoaded();
}Nested pages can not be modified or exotic nest
Firefox / Opera / Safari directly using iframe onload event
document.getElementById('ifrm').onload = function() {
//here doc
}In IE, registered iframe onreadystatechange event
var oFrm = document.getElementById('ifrm');
oFrm.onreadystatechange = function() {
if (this.readyState && this.readyState == 'complete') {
onComplete();
}
}Compatible approach Firefox / Opera / Safari / IE is
var oFrm = document.getElementById('ifrm');
oFrm.onload = oFrm.onreadystatechange = function() {
if (this.readyState && this.readyState != 'complete') return;
else {
onComplete();
}
}