This article describes the method of JS to implement iframe adaptive height. Share it for your reference, as follows:
I have been troubled by the high level of adaptability of iframes before, and a lot of JS code seems to be dumb in FF. Later, the following code was finally retrieved by me from the thousands of code piles that claim to be compatible with FF. I've used it, it's really easy to use. Especially for people like me who have a low level of JS (I'm so embarrassed) this code is simple and easy to understand and convenient to modify. Just copy and paste the following code into the <body> tag of the page where the iframe is located and modify the ID name (note that there are two places to be modified, and the location is explained in the code).
Salute to friends who created this code.
Step 1: Enter the following JS code under the <body> tag
<scriptlanguage="javascript">function adjustFrameSize(){ var frm = document.getElementById("iframe1"); //Replace iframe1 with your ID name var subWeb = document.frames ? document.frames["iframe1"].document : frm.contentDocument; if(frm != null && subWeb !=null) { frm.style.height="0px";//Initialize it, otherwise the large page height will be retained 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: the copy code code is as follows: <iframe id="iframe1"onload="adjustFrameSize()" scrolling="no" src="iframe1.html"width="100%" target="_self"frameborder="0"></iframe>
This code has a small disadvantage, that is, the distance between the content in the iframe and the outer border (if the outer border exists) is a little small, so you can adjust it appropriately by yourself; in addition, no other browsers have been tested except IE6.0 or above and FF, and no other defects have been found. If you find problems during use or have a better solution, please share it.
If the iframe page contains ajax-loaded page or dynamically add content through js, you can add the following methods:
1: Add the following content to the subpage
//Modify the parent window address function changeHeight(){window.top.location.hash = "#height=" + $(document).height();}Modify the part of the dom to call this method
2: Add the parent page
//Height 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 unchanged when clicking other pages} setTimeout(iframeHeight, 100);}iframeHeight();For more information about JavaScript related content, please check out the topics of this site: "Summary of JSON operation techniques in JavaScript", "Summary of JavaScript switching effects and techniques", "Summary of JavaScript search algorithm techniques", "Summary of JavaScript animation effects and techniques", "Summary of JavaScript errors and debugging techniques", "Summary of JavaScript data structures and algorithm techniques", "Summary of JavaScript traversal algorithms and techniques" and "Summary of JavaScript mathematical operations usage"
I hope this article will be helpful to everyone's JavaScript programming.