Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3

Thread: Snap an iframe

  1. #1
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Snap an iframe

    Hello

    I would like to achieve a goal but I found it so hard also I don't know if I posted in the right forum I don't know how to achieve that with Javascript, in a webpage if someone point on a link a snap shot open and contain an iframe of the webpage of that url that user points on it. I also ask how to control width and height of the iframe when it is larger page a scroll bar appears.

    Some people wants only a screen capture of the page of the url, but I am asking for an iframe instead.

    Thank you

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Creating the iframe and showing it is easy, but making a "snapshot" of the page, presumably making it small enough to FIT into your smaller iframe(?), is not at all easy and not something you can do with JavaScript alone.

    If you mean you are willing to load the entire full-size page into the iframe, then it's trivial.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Regular Coder
    Join Date
    Jan 2006
    Posts
    568
    Thanks
    6
    Thanked 84 Times in 84 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C// DTD HTML 4.//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <script type="text/javascript">
    function showSnapshot() {
    var iframe=document.getElementById("snap");
    iframe.src=this.href;
    }
    
    function loadLinkEvents() {
    var links=document.getElementsByTagName("a");
    
    for(i=0;i<links.length;i++) {
    links[i].addEventListener("mouseover", showSnapshot, false);
    }
    }
    
    window.addEventListener("load", loadLinkEvents, false);
    </script>
    </head>
    <body>
    <iframe id="snap" src="frame.html"></iframe>
    <a href="http://www.google.com/">google</a>
    <a href="http://www.yahoo.com/">yahoo</a>
    </body>
    </html>
    There's a fairly recent thread on here about dynamic iframe sizing where I posted some working code (I don't have it at the moment because it's on my other PC), but surely most sites would cause the iframe to take up too much room if that were used?

    Edit - this one adds a bit more functionality:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C// DTD HTML 4.//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <style type="text/css">
    iframe.snapshot{
    position:absolute}
    </style>
    </head>
    <body>
    <iframe id="snap" class="snapshot" style="display:none" src="frame.html"></iframe>
    <a href="http://www.google.com/">google</a>
    <a href="http://www.yahoo.com/">yahoo</a>
    <script type="text/javascript">
    var snapshot=document.getElementById("snap");
    
    window.addEventListener("mousemove", moveSnapshot, false);
    
    function moveSnapshot(e) {
    snapshot.style.top=e.clientY+20+"px";
    snapshot.style.left=e.clientX+20+"px";
    }
    
    function showSnapshot() {
    snapshot.style.display="block";
    snapshot.src=this.href;
    }
    
    function hideSnapshot() {
    snapshot.style.display="none";
    }
    
    var links=Array.prototype.slice.call(document.getElementsByTagName("a"));
    for(i in links) {
    links[i].addEventListener("mouseover", showSnapshot, false);
    links[i].addEventListener("mouseout", hideSnapshot, false);
    }
    </script>
    </body>
    </html>
    Last edited by gusblake; 12-12-2009 at 11:30 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •