...

View Full Version : Snap an iframe



lmchaelichkatel
12-12-2009, 03:02 AM
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

Old Pedant
12-12-2009, 04:08 AM
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.

gusblake
12-12-2009, 11:29 PM
<!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:



<!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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum