wrote this tutorials for iscripting.net but decided to post it around at some other places aswell
okay well I'm going to teach you how to use Iframes to grab elements from another page
do know this page has to be at the same host, if this is not you'll get a permission error
first of all we'll create a iframe and give it a name and a src to load
<iframe name="MyFrame" src="http://www.mysite.com/page.html"></iframe>
we got a working iframe so far,
we can use window.frames['MyFrame'] now to grab the frame and its elements however we'll have to be sure it has loaded succesfully.
we're going to write a function for this
<script>
function MyFunction(){
}
</script>
before we'll be adding anything to the function to be executed we should make sure the function gets called
for this we'll add a onload attribute to the iframe so once the iframe has been fully loaded the function will execute
<iframe name="MyFrame" src="http://www.mysite.com/page.html" onload="MyFunction()"></iframe>
as you see the name of the function is in the onload attribute, so the function gets called.
lets say we want a form from another page which is located at the loaded page,
we'll use the window.frames['MyFrames'] and get the first form in the iframe
we will use cloneNode to make a exact copy of the form in the iframe:
<script>
function MyFunction(){
form=window.frames['MyFrames'].cloneNode(true)
}
</script>
well now we got the element of the form containing the entire form saved in a variable,
we will need to use appendChild to add it to a element
lets make a div with the id banana
<div id="banana">Loading form...</div>
now lets add the form to the div we just made
<script>
function MyFunction(){
form=window.frames['MyFrames'].cloneNode(true)
document.getElementById("banana").appendChild(form)
}
</script>
the form will now be added at the end of the banana div,
it will NOT replace any html or overwrite it.
this means the loading form... message will remain intact.
to remove this we will clear the innerHTML before the add the form so the code will look like
<script>
function MyFunction(){
form=window.frames['MyFrames'].cloneNode(true)
document.getElementById("banana").innerHTML=''
document.getElementById("banana").appendChild(form)
}
</script>
theres only one more thing to do now,
we got to hide our iframe, we will use the style attribute for this
we could you display:none but this can stop it from loading in some browsers so we'll set the width and height to 0 instead
the iframe should now look like:
<iframe name="MyFrame" src="http://www.mysite.com/page.html" onload="MyFunction()" style="width:0;height:0"></iframe>
this code should be done by now
our final result should look like this:
<script>
function MyFunction(){
form=window.frames['MyFrames'].cloneNode(true)
document.getElementById("banana").innerHTML=''
document.getElementById("banana").appendChild(form)
}
</script>
<div id="banana">Loading form...</div>
<iframe name="MyFrame" src="http://www.mysite.com/page.html" onload="MyFunction()" style="width:0;height:0"></iframe>
this whas the end of the tutorial, know that you can use all DOM used normally at pages at iframes aswell by just adding window.frames['FrameName']. before it
so document.getElementById("rawr") would get the rawr element from the current page
but window.frames['FrameName'].document.getElementById("rawr") would get the rawr element from the iframe
IF the iframe is loaded
lately i heard people saying a lot iframes are useless for this as ajax can do the same and is faster,
this is not true, both can do it but there isn't really a difference at all in the time it takes
i hope this tutorial has helped or will help you with your coding,
if you've got any more questions feel free to ask 
i hope this has helped you a lot
-GK
