Iframe adaptive height method

web front end eighteen thousand two hundred and twelve 12 years ago (2013-04-11)

I haven't updated my blog for a long time. Because of the busy work, my team is making zblog theme At that time, I thought of the problem of iframe adaptive height, and now I want to share it with you. I hope it can help you.

Many students who are exposed to the WEB front end have been troubled by the adaptive height of iframe. Today, Tuoyuan shares the method of adaptive height of iframe.

The width of iframe is 300px by default, and the height is 150px by default. If you need to adapt the height, you need to use the following code:

It should be noted that the framesize () method must be placed after the iframe code, otherwise it is invalid.

 <iframe id="iframepage" name="iframepage" width="100%" height="100%" src=" https://www.wulongmao.com/ " allowTransparency="true" style="border:none;  overflow-x:none; " scrolling="auto"></iframe> <script type="text/javascript" src=" https://www.toyean.com/zb_users/upload/jquery.js "></script> <script language="javascript"> function frameresize(){ var winheight = $(window).height(); var iframeheight = winheight; $('#iframepage').css('height', iframeheight + 'px'); }; if(window.attachEvent){ document.getElementById("iframepage").attachEvent('onload', frameresize); } else{ document.getElementById("iframepage").addEventListener('load', frameresize, false); }  $(window).resize(frameresize); frameresize(); </script>

The above iframe code is called Tuoyuan Network On the home page of its website Oolong Cat, you can see that iframe is highly adaptive. If you are still looking everywhere on the Internet, you can try this method recommended by Tuoyuan.