All geek questions in one place

Here is my javascript for resizing iframe and need editing

Here is my iframe it is inside a div with a 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>
Run codeHide result

What I need is my code work, it will resize the iframe, and its src link is the size. But, as you can see, my div with the identifier "mydiv" has the width and height of the style. What I need is that my code is also 100% full width in width and height, when I make the window larger than the div, the size increases, but the iframe does not change, because it has a fixed size.

I tried

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

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

but it does not work correctly. Or iframe is corrupted, but does not work correctly. I hope you understand that I really need help with this.

+4
3

** **

, . , IFrame IFrame? , , .

IFrame:

  • CSS IFrame.
  • IFrame , , DOM javascript .

.

CSS3 , . , - ?

<!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>
Hide result
0

JavaScript, .

// 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;';
}

JSFiddle. .

, iFrame. , . url , , iframe.

. CSS , iFrame. CSS JavaScript.

jQuery , JavaScript, , .

, jQuery:

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

!

+1

Handling the iframe size depending on the content is often complicated, I would recommend using a third-party solution like https://davidjbradshaw.imtqy.com/iframe-resizer/ (I'm not connected to it, but I used it several times, no problem generally).

You can try and see if it suits your needs.

Hope this helps

0
source

Source: https://habr.com/ru/post/1670697/

More articles:


All Articles