JS method to implement iframe adaptive height (compatible with IE and FireFox)

The example in this article describes the method of implementing iframe adaptive height in JS. I share it with you for your reference. The details are as follows:

I have been troubled by the problem of iframe adaptive height before. Many JS codes seem to become dumb in FF. Later, I finally dug out the following code from the pile of thousands of codes claiming to be compatible with FF. I've used it, it's really useful. Especially for people like me who have low JS skills (I'm sorry), this code is simple and easy to understand and easy to modify. Just copy and paste the following code into the 6c04bd5ca3fcae76e30b72ad730ca86d tag of the page where the iframe is located, and Just modify the ID name (note that there are two places to modify, and the locations are explained in the code).

Pay tribute to the friend who originally created this code.

Step 1: Enter the following JS code under the 6c04bd5ca3fcae76e30b72ad730ca86d tag

<scriptlanguage="javascript">
function adjustFrameSize()
{
  var frm = document.getElementById("iframe1"); //将iframe1替换为你的ID名
  var subWeb = document.frames ? document.frames["iframe1"].document : frm.contentDocument;
  if(frm != null && subWeb !=null)
  {
   frm.style.height="0px";//初始化一下,否则会保留大页面高度
   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 the id to the iframe tag ="iframe1"onload="adjustFrameSize()"

For example:

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

This code has a small disadvantage, that is, the content in the iframe and the outer border (if there is an outer border) border) is a bit small, you can adjust it appropriately; in addition, I have not tested other browsers except IE6.0 or above and FF, and no other defects have been found. If you find problems during use or If you have better solutions for children's shoes, please share them.

If there is an ajax loaded page inside the iframe page or the iframe height changes due to dynamic addition of content through js, you can add the following method:

1: Add the following content to the sub-page

//修改父窗口地址
function changeHeight(){
window.top.location.hash = "#height=" + $(document).height();
}

Call this method to modify the dom part

2: Add 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";//防止点击其他页面时高度不变
  }
  setTimeout(iframeHeight, 100);
}
iframeHeight();

I hope this article will be helpful to everyone in JavaScript programming.

For more JS methods to implement iframe adaptive height (compatible with IE and FireFox), please pay attention to the PHP Chinese website!