iframe高度自适应

柔光的暖阳◎ 2021-07-26 12:30 644阅读 0赞
  1. 子页面头部是:
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <iframe id="mainFrame" name="mainFrame" scrolling="no" src="Index.aspx"
  4. frameborder="0" style="padding: 0px; width: 100%; height: 1000px;"></iframe>
  5. 父页面调用:
  6. <script type="text/javascript">
  7. startInit('mainFrame', 560);
  8. </script>
  9. <script>
  10. var browserVersion = window.navigator.userAgent.toUpperCase();
  11. var isOpera = browserVersion.indexOf("OPERA") > -1 ? true : false;
  12. var isFireFox = browserVersion.indexOf("FIREFOX") > -1 ? true : false;
  13. var isChrome = browserVersion.indexOf("CHROME") > -1 ? true : false;
  14. var isSafari = browserVersion.indexOf("SAFARI") > -1 ? true : false;
  15. var isIE = (!!window.ActiveXObject || "ActiveXObject" in window);
  16. var isIE9More = (! -[1,] == false);
  17. function reinitIframe(iframeId, minHeight) {
  18. try {
  19. var iframe = document.getElementById(iframeId);
  20. var bHeight = 0;
  21. if (isChrome == false && isSafari == false) {
  22. try {
  23. bHeight = iframe.contentWindow.document.body.scrollHeight;
  24. } catch (ex) {
  25. }
  26. }
  27. var dHeight = 0;
  28. if (isFireFox == true)
  29. dHeight = iframe.contentWindow.document.documentElement.offsetHeight + 2;//如果火狐浏览器高度不断增加删除+2
  30. else if (isIE == false && isOpera == false && iframe.contentWindow) {
  31. try {
  32. dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
  33. } catch (ex) {
  34. }
  35. }
  36. else if (isIE == true && isIE9More) {//ie9+
  37. var heightDeviation = bHeight - eval("window.IE9MoreRealHeight" + iframeId);
  38. if (heightDeviation == 0) {
  39. bHeight += 3;
  40. } else if (heightDeviation != 3) {
  41. eval("window.IE9MoreRealHeight" + iframeId + "=" + bHeight);
  42. bHeight += 3;
  43. }
  44. }
  45. else//ie[6-8]、OPERA
  46. bHeight += 3;
  47. var height = Math.max(bHeight, dHeight);
  48. if (height < minHeight) height = minHeight;
  49. //alert(iframe.contentWindow.document.body.scrollHeight + "~" + iframe.contentWindow.document.documentElement.scrollHeight);
  50. iframe.style.height = height + "px";
  51. } catch (ex) { }
  52. }
  53. function startInit(iframeId, minHeight) {
  54. eval("window.IE9MoreRealHeight" + iframeId + "=0");
  55. window.setInterval("reinitIframe('" + iframeId + "'," + minHeight + ")", 100);
  56. }
  57. </script>

参考:https://www.cnblogs.com/slyzly/articles/2422737.html

发表评论

表情:
评论列表 (有 0 条评论,644人围观)

还没有评论,来说两句吧...

相关阅读

    相关 iframe高度适应

    前提:父页面是功能选项,固定在网页上。在网页留出的空白部分,用于嵌套子页面 为了美观和用户体验,子父页面共用子页面的纵向滚动条,且子页面的内容是变化的,所以要设置iframe

    相关 iframe适应高度

    [JS][]自适应高度,其实就是设置[iframe][]的高度,使其等于内嵌网页的高度,从而看不出来滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。 如果内容是固定的,

    相关 iframe框架高度适应

    在写jsp页面时,在主页面中用到了iframe标签嵌套子页面的情况,这种情况,子页面中的内容有的多有的少,所以iframe的高度也要自动适应,在网上找到了这个方式,记录一下;