Easy way to Resize an Iframe with javascript

Question

my case is a little different than the previous ones that have been posted so far.

I want my iframe to resize using a function with javascript. The source for my iframe so far looks like this

<iframe id='bframe' onload='base=history.length;gothere(history.length);' name='bframe' src='http://source.com' style='border: 0pt none ; left: -794px; top: -166px; position: absolute; width: 1600px; height: 799px;' scrolling='no'></iframe></div>

The reason for the "onload" stuff is because I want the iframe to resize when an action within the iframe has been done! The only thing I need now is a function in javascript that allows me to change the width and height as well as top and left coordinates of the iframe.

That would be all, help is really appreciated!!!

Thanks

EDIT:

--

THANKS for the response but i seemingly can't get it to work:

Hey, thanks for your response. I put my code like this into the part of my page

    function resizeme() {
    document.getElementById('bframe').onload = function() {
    this.style.width = '1230px';
    this.style.height = '1230px';
    base = history.length;
    gothere(history.length);
}
}

and I replaced the part in my code where it redirects to another page after the iframe content has changed to "resizeme()" (the redirection worked so the code must be correct)

However, nothing really changed - What is wrong?

bjb568 · Accepted Answer · 2014-04-15 20:32:53Z

1

Same as all (block-level) elements:

element.style.width = '123px';
element.style.height = '123px';

In this case:

<iframe id='bframe' onload="this.style.width='123px';this.style.height='123px';base=history.length;gothere(history.length);" name='bframe' src='http://source.com' style='border: 0pt none ; left: -794px; top: -166px; position: absolute; width: 1600px; height: 799px;' scrolling='no'></iframe></div>

You should really put it in a function, tho:

document.getElementById('bframe').onload = function() {
    this.style.width = '123px';
    this.style.height = '123px';
    base = history.length;
    gothere(history.length);
}

In your specific case,

function resizeme() {
    document.getElementById('bframe').style.width = '1230px';
    document.getElementById('bframe').style.height = '1230px';
}
document.getElementById('bframe').onload = function() {
    resizeme();
    base = history.length;
    gothere(history.length);
}

At least that's what I think you're trying to do. It defines a resizeme function that you can call whenever you like, and also gives the iframe an onload function to call resizeme and do other stuff (base and gothere).

edited Apr 15, 2014 at 20:32

answered Apr 15, 2014 at 19:02

bjb568

11.5k11 gold badges53 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Pouya Compton Over a year ago

hey i cant get it to work somehow, you can check out my starter posting which i edited now ;)

Pouya Compton Over a year ago

Thanks. Something is still not working! It doesnt resize the iframe at all, it just remains the same size ..the most it does is to push the iframe content a bit to the left

bjb568 Over a year ago

Could you make a jsfiddle?

Pouya Compton · Accepted Answer · 2014-04-16 18:49:19Z

http://jsfiddle.net/TmUfE/

Here we go! The source is a bit messy I didn't code it and I'm not an expert in this. However it should do this:

Whenever a link is pressed (more like a submit button in the iframe), it should redirect the whole page to something else. That has been the original source and it worked for my "special" site which I didn't put in the jsfiddle so the source itself is working for that matter!

I wanted to modify it so that when the submit within the iframed is clicked, it resizes and repositions the iframe (to crop another part of the second page and also have a larger iframe shown the content of it).

I found that this part

<div style='overflow: hidden; margin-top:-5px; width: 403px; height: 313px; position: relative;' id='odiv'>

was also doing its part when it comes to resizing it (thats why it didnt work in the first place).

So the first task would be: To resize the iframe in the iframes source with the width and height and such + the part I just entered here as well (dont know how to figure that out and how to resize them via code).

I would also be paying as some sort of "thank you" / donate to someone helpful because I really cannot get it done myself no matter how hard I try.

Collectives™ on Stack Overflow

Easy way to Resize an Iframe with javascript

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related