The Ins and Outs of Iframes - iframe Uses continued
(Page 4 of 4 )
Joe could have crudely effected a small movement of the viewed area by tinkering with the size of the iframe, and the marginwidth and marginheight attributes, which set the margins of the area viewed inside the iframe, but this wouldn't work for him, because he needed major movement all the way down to the middle of the somesportsite.com page where the score box was located. JavaScript to the rescue!
Joe added some simple JavaScript to the page to replace the scrollbars and automatically scroll the somesportsite.com page to a position where the score box is visible when the page loads in the iframe. The tool he used for this job was the HTML DOM scrollTo() method.
<script type="text/javascript">
function MoveArea() {
var moveleft = 600;
var movedown = 700;
window.scorebox.scrollTo(moveleft, movedown);
}
window.onload = MoveArea;
</script>
It should be pretty obvious what this code does, even to someone not familiar with JavaScript. It scrolls the page to 600 from the left side of the page, and 700 down from the top of the page.
You may have noticed that the src attribute of the above iframe tag in iframedemo.html points to a page on the same domain called dummypage.html (or whatever name you want) rather than the remote somesportsite.com page. The reason for this is that browsers have security restrictions against access to DOM on remote pages, to prevent just the sort of thing that Joe was trying to do, among other things, so he could not use the scrollTo()method directly on the somesportsite.com page.
Being the resourceful guy that he is, Joe came up with a simple workaround. He reasoned that since his JavaScript function, MoveArea(), worked OK with a page on his own domain, all he had to do was create a dummy page on his domain that contained an iframe into which the somesportsite.com page would be loaded. Then, since this page containing the entire somesportsite.com page was on the same domain, he could then use the MoveArea() function from his script to scroll this dummy page in an iframe on the iframedemo.html page, and thereby appear to scroll the somesportsite.com page.
In other words, he would have a page with an iframe that contains another page with an iframe that contains the somesportsite.com page. Rather convoluted, but it worked. Note, though, that this trick does not work so well on a slow Internet connection because of lag time.
The dummypage.html page he created for this purpose contained only this line:
<iframe src="http://somesportsite.com" width="100%" height="1000" scrolling="no"></iframe>
Now Joe's iframe displays only the score box, and all the club members think it is part of their site, wondering how Joe did something so amazing as create a live score box that looks just like the one on the somesportsite.com page!
Always get permission before incorporating any kind of content from someone else's page into your own.
Conclusion
Well, that's all for now. In part one of the article we learned a cool iframe trick, but this barely scratches the surface of what can be done with iframes. There are many things you can do. In the next installment of this article, part two, we will learn about one of the most important uses of iframes, remote scripting, and even learn to create a simple remote procedure call (RPC) utilizing an iframe!
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
