JS Method of Implementing iframe Adaptive Height of Compatible with IE and FireFox

An example of how JS achieves iframe adaptive height is given.Share it for your reference, as follows:

Previous 1 has been plagued by the iframe adaptive height problem, and many JS codes seem dumb in FF.Later, the following code was finally turned over by me from the thousands of code heaps known as FF compatible.I've already used it. It's really good.Especially for people like me who have a low level of JS (I'm sorry), this code is easy to understand and easy to modify, just copy and paste the following code into the page where iframe is located < body > Inside the tag, and modify the ID name under 1 (note that there are two places to modify, the location is explained in the code).

Salute your friends who created this code.

Step 1: In < body > Enter the following JS code under the label

<scriptlanguage="javascript">
function adjustFrameSize()
{
  var frm = document.getElementById("iframe1"); // take iframe1 Replace with yours ID name 
  var subWeb = document.frames ? document.frames["iframe1"].document : frm.contentDocument;
  if(frm != null && subWeb !=null)
  {
   frm.style.height="0px";// Initialization 1 lower , Otherwise, the large page height will be preserved 
   frm.style.height = subWeb.documentElement.scrollHeight+"px";
   frm.style.width = subWeb.documentElement.scrollWidth+"px";
   subWeb.body.style.overflowX="auto";
   subWeb.body.style.overflowY="auto";
  }
}
</script>

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

For example:

<iframe id="iframe1"onload="adjustFrameSize()" scrolling="no" src="iframe1.html"width="100%" height="300px" target="_self"frameborder="0"></iframe>

There is one minor disadvantage of this code, that is, the distance between the content in iframe and the outer border (if an outer border exists) is a little small after use, so you can adjust it by yourself.In addition, no other browsers have been tested except for IE version 6.0 and FF, and no other defects have been found. If you find problems in use or have better solutions, please share one.

If the iframe page contains a page loaded by ajax or if the iframe height changes as a result of dynamically adding content through js, add one:

1: Add the following to the subpage

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

Modify part of dom to call this method

2: Parent Page Add

// 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 clicking on other pages from changing height 
  }
  setTimeout(iframeHeight, 100);
}
iframeHeight();

More readers interested in JavaScript-related content can view this site's topics: json Operation Skills Summary in JavaScript, JavaScript Switching Special Effects and Skills Summary, JavaScript Find Algorithmic Skills Summary, JavaScript Animation Special Effects and Skills Summary, JavaScript Errors and Debugging Skills Summary, JavaScript Data Structure and Algorithmic Skills Summary,Summary of JavaScript Traversal Algorithms and Techniques and Summary of JavaScript Mathematical Operation Usage

I hope that the description in this paper will be helpful to everyone's JavaScript program design.