JavaScript Forum

**tomer1** · 09-05-2011, 05:36 AM

Hello everyone,
I'm trying to write a script that open a new window each time someone clicks on inside the <iframe>

I'll give an example:
<iframe src='http://www.google.com' onClick="myPopup()"> </ iframe>

<script type="text/javascript">
<-
myPopup function () {
window.open ("http://www.google.com/")
}
//-->
</ script>

Every time someone clicks on the iframe, the function myPopup should open a new window with Google site.

The problem that onClick not working in iframe
(If you try onmouseover for example, then it will work)

How can I make it work?

**Physicsguy** · 09-05-2011, 08:33 AM

Try onmousedown() and onmouseup().

**tomer1** · 09-05-2011, 09:38 AM

onmousedown() and onmouseup() are very different from onclick()

I have to call the function onley when someone click on the iframe!

**Physicsguy** · 09-05-2011, 09:49 AM

Not really. OnClick registers when the user's mouse 'declicks'.

**tomer1** · 09-05-2011, 10:48 AM

I have to find a way it works but only when someone click on the mouse..

**Physicsguy** · 09-05-2011, 10:49 AM

onmouseup() will register at the same time onclick() does, and it will only register once the user releases the left mouse button.

**lizciz** · 09-05-2011, 02:11 PM

Either one of onclick, onmousedown and onmouseup should work. But add it to the body of the page that is shown in the iframe, instead of to the iframe itself.

**tomer1** · 09-05-2011, 07:49 PM

**Physicsguy** · 09-05-2011, 07:54 PM

Like lizciz said, put the onmouseup() attribute on the body. You could probably just wrap a <div onmouseup="myPopup()">(iframe code)</div> around it and it'll work.

**lizciz** · 12:53 AM

This is what I meant:

test1.htm

HTML Code:

<html>
<head>
   <title>Test1</title>
</head>
<body>
   <p>This is my frame!</p>
   <iframe src="test2.htm"></iframe>
</body>
</html>

test2.htm

HTML Code:

<html>
<head>
   <title>Test2</title>
</head>
<body onclick="alert('Open window! Add your javascript code here.');">
   <p>This is just some random text, bla bla...</p>
</body>
</html>

EDIT:

And just for the recoord, Scott was right about the different events.
The onmousedown event fires when the mousebutton is pushed down.
The onmouseup event fires when the mousebutton is released.
The onclick event fires when the mousebutton is pushed down and released, basically onmousedown + onmouseup.

So if a user does a "normal" click, either one of these events should be fine to use.

**tomer1** · 09-06-2011, 07:23 AM

Thanks lizciz, but I can't add the "onclick" on "Site2"
I only control on "Site1"

This is my "Site1":

<iframe src='http://www.google.com' onClick="myPopup()"> </iframe>

<script type="text/javascript">
function myPopup() {
window.open ("http://www.google.com/")
}
</script>

The "Site2" is google.com

I try also:

<div onClick="myPopup()">
<iframe src='http://www.google.com'></iframe>
</div>

<script type="text/javascript">
function myPopup() {
window.open ("http://www.google.com/")
}
</script>

But it not works to. Any idea??

**lizciz** · 09-06-2011, 02:12 PM

I guess you could place a div over the frame and make it transparent. Try out the code below to see what I mean, I added a red border to the div so that you can see where it is.

HTML Code:

<html>
<head>
	<title>Test</title>
	<style type="text/css">
	#cover { background: transparent; border: 2px solid #f55; width: 700px; height: 500px; margin-top: -400px; position: relative; z-index: 10; }
	#frame { width: 700px; height: 500px; position: relative; z-index: 5; }
	</style>
	<script type="text/javascript">
	function run() {
		alert("Hey Ho!");
		// Your code here
	}
	</script>
</head>
<body>
	<iframe src="http://www.google.com" id="frame"></iframe>
	<div id="cover" onclick="run()"></div>
</body>
</html>

**tomer1** · 09-07-2011, 07:22 AM

That's better. but not good enough

When you click the on link / search field, it does not work.

I need to make the Iframe just like a picture, make it be possible to click on it and open a new window.

Is it possible to make the iframe unclickable?

**lizciz** · 09-07-2011, 02:51 PM

Hmm, that's odd. In Chrome it works fine, but I see what you mean when viewing it in IE. I'm all out of ideas now...

But I have to ask. Why would you want show a page in an iframe and open that page in a new window when clicked? And, if this is really waht you want, then why not just take a screenshot of the page and add it as an image?

**tomer1** · 09-07-2011, 06:07 PM

Yes, this is really what I want.
I can't take a screenshout because I want to be able to see on the statistics when the iframe displayed.

When I display website in iframe, it's not convenient at all to browse the site, that's why I want to open a new page when someone click.

Must be a way to do that.

**Physicsguy** · 09-07-2011, 07:30 PM

I guess I just don't quite get why you want to do what you want to do. From my understanding, you want to have an iframe that doesn't do anything but display a website until somebody clicks inside the iframe, where it takes the user to that website.

If I am correct, my question is why??. I guess you could even take a screenshot of the website, stick it in a div with set height and width and overflow:scroll, and basically have the same effect. Stick a link on the image and bam, you're done. The only problem with that is it's an image, and it won't be a live way to do it.

You said Is it possible to make the iframe unclickable? Well, I guess there would be, somehow, but I have the same question. Why??. Why have an interactive element on your page, displaying an interactive website, when you're not actually supposed to interact with it?

**tomer1** · 06:54 AM

Quote:

Originally Posted by Physicsguy

From my understanding, you want to have an iframe that doesn't do anything but display a website until somebody clicks inside the iframe, where it takes the user to that website.

YES!!!

"I can't take a screenshout because I want to be able to see on the statistics when the iframe displayed..."

No I can't!
I want to see on google analytics when the iframe displayed.

**lizciz** · 09-08-2011, 01:53 PM

Quote:

Originally Posted by Physicsguy

Why have an interactive element on your page, displaying an interactive website, when you're not actually supposed to interact with it?

I agree with Physicsguy. But if you insits on having an iframe, I think your best bet is to add a normal text link, close to the iframe, that says "Open this website in a new widnow".

**Physicsguy** · 04:41 PM

I had time, so I built a script to accomplish what you need!

Here it is, just make sure to use the onmousedown() on the body element and have that overlay div already created!

Code:

<body onmousedown="fclick(event);">
<iframe id="theframe" width="800" height="400" src="http://localhost"></iframe>
<div id="overlay"></div>
<script type="text/javascript">
/*OnClickable iframes script created by Physicsguy on Tycoon Talk*/
/*Please keep this note intact ;), you can delete this one though*/
oT=document.getElementById("theframe").offsetTop;
oL=document.getElementById("theframe").offsetLeft;
oW=document.getElementById("theframe").width;
oH=document.getElementById("theframe").height;
document.getElementById("overlay").style.position="absolute";
document.getElementById("overlay").style.marginTop="-"+oH;
document.getElementById("overlay").style.height=oH+"px";
document.getElementById("overlay").style.width=oW+"px";
document.getElementById("overlay").style.marginLeft=oL;
document.getElementById("overlay").style.color="transparent";
document.getElementById("overlay").style.color="transparent";
function fclick(event) {
	pX=event.clientX;
	pY=event.clientY;
	if(pX>oL && pX<oW && pY>oT && pY<oH){
		/*Put stuff here*/
		alert("You clicked inside the frame!");
		/*End stuff*/
	}
}
</script>
</body>

Minified version, leaving only the part you need to worry about readable:

Code:

<body onmousedown="fclick(event);">
<iframe id="theframe" width="800" height="400" src="http://localhost"></iframe>
<div id="overlay"></div>
<script type="text/javascript">
/*OnClickable iframes script created by Physicsguy on Tycoon Talk*/
/*Please keep this note intact ;), you can delete this one though*/
oT=document.getElementById("theframe").offsetTop;oL=document.getElementById("theframe").offsetLeft;oW=document.getElementById("theframe").width;oH=document.getElementById("theframe").height;document.getElementById("overlay").style.position="absolute";document.getElementById("overlay").style.marginTop="-"+oH;document.getElementById("overlay").style.height=oH+"px";document.getElementById("overlay").style.width=oW+"px";document.getElementById("overlay").style.marginLeft=oL;document.getElementById("overlay").style.color="transparent";document.getElementById("overlay").style.color="transparent";function fclick(event){pX=event.clientX;pY=event.clientY;if(pX>oL&&pX<oW&&pY>oT&&pY<oH){
		/*Put stuff here*/
		alert("You clicked inside the frame!");
		/*End stuff*/
	}
}
</script>
</body>

I hope you enjoy it! Tested in Firefox 5 and Chromium 12 on Ubuntu 10.10 (I know

)

**The iframe's width and height attributes MUST be straight numbers. For example, '800' will work, but '100%' or even '800px' will not. I could fix the script to do that easily, but it would add more confusing lines of code. To keep it simple, I left it out.
If you are interested in having that functionality, just modify the script so it used the width relative to the window size. For example, take 80% of 1600 (if your browser's width is 1600).

Basically the way the script works is it covers the iframe with an overlay div that still responds to javascript's 'window'. Then, when the mouse is clicked via the onmousedown() on body, it checks whether the mouse's location was inside the given points. The four measurements are how tall the iframe is, how long it is, the top offset, and the left offset. Using these, it's pretty easy to see if the mouse was inside that window onmousedown.

Simple, really, but it takes more work that it should. As well, I mashed together this code with what I know of, if there's a way to improve it or fix it for all browsers (if one is buggy that I didn't test), please do

**tomer1** · 09-09-2011, 06:31 AM

Not work on IE