iframe height change if clicked

Question

I need to change the height of an iframe when clicked. The iframe is created with this code:

var box = document.createElement('iframe');
box.id = "statasa";
box.setAttribute('onclick', 'getmap()');
box.src = 'http://www.mysite.com/map.php';
box.frameBorder = 1;
box.style.border = 1;
box.style.overflow = 'hidden';
box.style.cursor = 'pointer';
box.style.width = '300px';
box.style.height =  '720px';
box.style.position = 'absolute';
document.getElementsByTagName('body')[0].appendChild(box);

And this is the function:

function getmap() {
    d = document.getElementById('statasa');
    d.style.width="150px";
    d.style.height="150px";
}

Where is the error? Are there simpler methods?

You cannot click an "iframe" and reduce its width and height because...it will effect its child elements. — Rajiv007, Jun 19 '13 at 09:42

score 0 · Answer 1 · edited May 23 '17 at 11:56

0

You can't detect a click event in an iframe. See Detect Click into Iframe using JavaScript.

As for the second part of the question, one way to simplify is instead of:

box.setAttribute('onclick', 'getmap()');

use:

box.onclick = getmap();

edited May 23 '17 at 11:56

Community

1
1

answered Jun 19 '13 at 09:36

Derek Henderson

9,388
4
42
71

is working but only if i click the iframe border – Barricade Jun 19 '13 at 09:52

iframe height change if clicked

1 Answers1