|
||||||||||||||||||||||||
|
Clone-Noding to IFrame and accurate positioning in cross-browser animation
When doing cross-browser DHTML/CSS2 based animation, interactive or not, a major issue that emerges is accurate relative placement of absolute positioned elements in different browsers. The more complex the host page structure becomes the more the danger of relative placement of elements being ok in one browser and off in another.
A good solution to this problem is doing all DHTML animation within specially reserved iframes. The reason this is a solution is that all placement within the iframe is done using coordinates relative to the iframe's body root and not the hosting document's body root. However, using iframes in this way may require using DHTML to actually populate the iframes with elements and/or perform other manips on their DOMs.
Here is two alternative methods to clone all elements within a container element under the hosting document to an iframe's document body. You just need to pass the host body's container element and the iframe's body or the iframe itself in the second one. Note that document.getElementById() can only fetch elements of the host document. You would need to run iframe.contentWindow.document.getElementByid() to get a ref to an element in the iframe's doc.
function moveElementContentsToIFrameElement(el, ifelBody){
var e, els;
if (el.hasChildNodes()) {
els = el.childNodes;
var o;
for (var i = 0; i < els.length; i++){
e = els[i];
//copy each child as child of target iframe node
o = e.cloneNode(true);
//alert(ifelBody);
ifelBody.appendChild(o);
}
//finally remove elements container
el.parentNode.removeChild(el);
}
}
function moveElementContentsToIFrameElement2(el, ifel){
ifel.contentWindow.document.writeln(el.innerHTML);
el.parentNode.removeChild(el);
}
Some other notes:
- Most reliable way to access the iframe's document (and everything else therein) is to get a ref to the iframe tag object by id and then do iframe.contentWindow.document
- Under IE there are separate event objects for the host and iframe docs. To get a ref to the iframe's event object do iframe.contentWindow.event
A full working example using the methods and techniques outlined in this article is here.




Post new comment