How to Implement iframe width and height adaptive using jQuery

Sometimes you need to use iframe to call some third-party pages or some of your own pages that are useless. here we need to automatically implement width and height adaptive functions based on the content in terms of height and width, next I will introduce an iframe width and height adaptive instance based on jQuery.

Highly adaptive is a super simple method, and you don't have to write anything to judge the browser height and width.

You can choose one of the following two methods. One is stored on the same page as iframe, and the other is stored on the test.html page.
Be sure not to make the mistake.

Iframe code. Be sure to write the ID

The Code is as follows:	Copy code
<Iframe src = "test.html" id = "main" width = "700" height = "300" frameborder = "0" scrolling = "auto"> </iframe>

Jquery code 1:

The Code is as follows:	Copy code
// Note: the following code is stored in test.html for calling. Vertex (w.w.parent.doc ument). find ("# main"). load (function (){ Var main = warn (window.parent.doc ument). find ("# main "); Var thisheight = $ (document). height () + 30; Main. height (thisheight ); });

Jquery Code 2:

// Note: the following code is put on the same page as iframe for calling.

The Code is as follows:	Copy code
$ ("# Main"). load (function (){ Var mainheight = $ (this). contents (). find ("body"). height () + 30; $ (This). height (mainheight ); });

Minimum height required:

The Code is as follows:

Copy code

$ ("Your id"). load (function () {// be sure to have. load and so on loaded Var iframeHeight = $ (this). contents (). find ("html"). height (); // write find ("body") to get the height. If (iframeHeight <600) {// if the minimum height is required, the if judgment is available, $ (This). attr ("height", 600) // if the height is smaller than 600, change the iframe height to 600. } Else { $ (This). attr ("height", iframeHeight) // if the height is greater than or equal to 600, the iframe height is equal to the height of the embedded html } });

Similarly, change. height () to. width () to get the width.

Iframe adaptive width and height

How can I use jQuery to implement iframe width and height self-adaptation? In fact, it is very simple. You only need the following code:

The Code is as follows:

Copy code

JQuery (document). ready (function ($ ){ // If "iframe" is the ID of iframe, an event is triggered when it is loaded. $ ('# Iframe'). load (function (){ // "Ref_page" is the ID of the referenced page DIV to obtain the external width and height of the DIV. Var width = $ (this). contents (). find ('# ref_page'). outerWidth (); Var height = $ (this). contents (). find ('# ref_page'). outerHeight (); // Set the width and height of iframe. $ (This). width (width ); $ (This). height (height ); }); });

To make the iframe width and height match the width and height of the sub-page accurately, you must note the following: 1. The margin and padding styles of the Child page body must be style = "margin: 0 0; padding: 0 0;"; 2. referenced DIV (for example, div # ref_page in the Code) it should be a sub-page container. All content of the sub-page must be placed in the container, and the referenced DIV's margin style must be style = "margin: 0 0 ;".