CODEWITHSUNDEEP
javascriptjqueryhtmlcssiframe
Mm Pp
Mm Pp

Reputation: 227

here's my javascript to resize iframe and need some edit

Here's my iframe it's inside a div with button

  	function myFunction() {
    	var url =document.getElementById("myFrame").getAttribute("src");
    	var newUrl = url.substring(0,url.indexOf("width")) + "width=320&height=270";
    	document.getElementById("myFrame").setAttribute("src",newUrl);
    	document.getElementById("myFrame").setAttribute("style","border:none;overflow:hidden;width:320px;height:270px;");
      }
  <div style="width:auto;height:auto;" id="mydiv">
    
       <iframe id="myFrame" src="http://domain.com/page.php?width=400&height=400" height="400" width="400"></iframe>
    
    </div>
    
    <button onclick="myFunction()">Change Size</button>

What I need here is my code works it will change the size of iframe and its src link is size. But as you see, my div with id of "mydiv" has style width and height is auto. What I need my code also to be 100% full width on width and height when I make window larger that div is size increase but iframe doesn't change because it has fixed size.

I have tried

("style","border:none;overflow:hidden;width:100%;height:100%;")

("width")) + "width=100%&height=100%"

but it doesn't work correctly. Either iframe is messed up, but doesn't work right. Hope you understand I really need help in this.

Upvotes: 4

Views: 1216

Answers (3)

Jesus Lugo
Jesus Lugo

Reputation: 796

Handle iframe sizing depending on the content is often complicated, I'd recommend using a 3rd party solution like https://iframe-resizer.com/ (I'm not related to it, but I've used it several times, no issues at all).

You can give a try and see if that suits your needs.

Hope this helps

Upvotes: 1

Matthew Randall
Matthew Randall

Reputation: 59

** EDIT **

It turns out I did completely misunderstand the question. You wish the content of the IFrame to fill the IFrame? I don't think you can do what you want.

If you need to resize the content inside an IFrame:

  • Edit the CSS of the page inside the IFrame.
  • If the IFrame content has the same domain name as your parent, then you can access its DOM using javascript, and manipulate.

Neither of these work for your code example though.

I've played around with some CSS3 in the snippet which makes the content look larger. Maybe something like this could help?

<!DOCTYPE html>
<html>
    <head>
        <style>
            html, body { width: 100%; height: 100%; padding:0; margin:0; }
            
            #div {
              width: 600px; 
              height: 600px; 
              padding: 0; 
              
            }
            
            #iframe {
              width: 480px; 
              height: 480px; 
              border: 1px solid black;
              
              transform: scale(1.25);
              transform-origin: 0 0;
              
              /* browser compatibility */
              -webkit-transform: scale(1.25);
              -webkit-transform-origin: 0 0;   
              -moz-transform: scale(1.25);
              -moz-transform-origin: 0 0;
              -o-transform: scale(1.25);
              -o-transform-origin: 0 0;  
              -ms-zoom: 1.25;         
            }
            
        </style>
    </head>
    <body>
        <div id="div">
            <iframe id="iframe" src="http://domain.com/page.php"></iframe><br />
        </div>       
        
        <!-- uncomment to view the original size of the content inside the iframe -->
        <!--
        <iframe id="myFrame" src="http://domain.com/page.php?width=400&height=400" height="600" width="600"></iframe>
        -->
    </body>
</html>

Upvotes: 0

Ollie Cee
Ollie Cee

Reputation: 704

If we're talking about pure JavaScript, the below example should work fine.

// Select your button
var button = document.getElementById("button");

// Button event listener for click
button.addEventListener("click", myFunction);

// Button function
function myFunction() {
    document.getElementById("myFrame").style.cssText = 'width: 600px !important; height: 600px !important;';
}

I've tested the code on JSFiddle. Check it out.

I think you were focusing within the iFrame too much. You have to focus on things you can work with. In this case, trying to modify the url attribute won't do anything because that isn't what controls the iframe width and height.

The element controls the appearance of itself. So you must use CSS or attributes provided with the iFrame. In this case I choose to go with CSS via JavaScript.

I didn't provide a jQuery or 3rd party solution because the user specified JavaScript and it looked like he or she has not implemented any of it throughout the code.

But to entertain the thought, here is a jQuery solution:

$('#button').click(function () {
    $('#myFrame').css("cssText", "width: 600px !important; height: 600px !important;");
});

A much cleaner approach!

Upvotes: 1

Related Questions