How to Implement iframe adaptive height in JS (compatible with IE and FireFox)

This article mainly introduces how to implement iframe self-adaptive height in javascript, and involves related techniques for interactive dynamic page element attribute operations between javascript and iframe, for more information about how to implement iframe adaptive height in JS, see the example in this article. We will share this with you for your reference. The details are as follows:

I have been plagued by the problem of iframe self-adaptive height. Many JS codes seem to have become dumb in FF. Later, the code below was finally turned out from the code heap that is known to be compatible with FF. I have already used it. It is really easy to use. Especially for people like me who have low JS levels (I am really sorry), this code is easy to understand and easy to modify. Just copy and paste the following code to the page where iframe is located.Label, and modify the ID name (note that there are two places to be modified, and the location is described in the Code ).

Pay tribute to the original code.

Step 1:Enter the following JS Code under the tag

 
  
Function adjustFrameSize () {var frm = document. getElementById ("iframe1"); // replace iframe1 with your ID name var subWeb = document. frames? Document. frames ["iframe1" 2.16.doc ument: frm. contentDocument; if (frm! = Null & subWeb! = Null) {frm. style. height = "0px"; // initialize it; otherwise, the height of the large page frm is retained. style. height = subWeb.doc umentElement. scrollHeight + "px"; frm. style. width = subWeb.doc umentElement. scrollWidth + "px"; subWeb. body. style. overflowX = "auto"; subWeb. body. style. overflowY = "auto" ;}} script
 

Step 2: Add id = "iframe1" onload = "adjustFrameSize ()" to the iframe label ()"

For example:

This code has a small disadvantage, that is, the distance between the content in iframe and the outer border (if there is an outer border) is a little small, you can adjust it yourself; in addition, no other browsers have been tested except for IE6.0 and later versions, and no other defects have been found. If you find any problems in use or have better solutions, please share with us.

If the iframe page contains an ajax-loaded page or the content is dynamically added using js to cause the iframe height to change, you can add the following method:

1: Add the following content to the subpage:

// Modify the parent window address function changeHeight () {window. top. location. hash = "# height =" + $ (document). height ();}

Call this method to modify the dom part.

2: add on the parent page

// Highly adaptive

Var iframe = document. getElementById ("iframe1"); function iframeHeight () {var hash = window. location. hash. slice (1), h; if (hash &/height = /. test (hash) {h = hash. replace ("height =", ""); iframe. style. height = h + "px"; window. location. hash = "# temp"; // prevent the height from changing when other pages are clicked} setTimeout (iframeHeight, 100);} iframeHeight ();

I hope this article will help you design JavaScript programs.

For more JS methods for implementing iframe self-adaptive height (compatible with IE and FireFox), please follow the PHP Chinese website!