动态 iframe 身高

Question

I have a problem.我有个问题。 I'm working on a template which is composed by a central div and an iframe inside it.我正在处理一个由中央 div 和其中的 iframe 组成的模板。 The div should resize dynamically depending on the content of the iframe. I tried other solutions found here, without results. div 应根据 iframe 的内容动态调整大小。我尝试了此处找到的其他解决方案，但没有结果。 I'm using the following HTML code:我正在使用以下 HTML 代码：

<div id="site_content" style="position:relative; width:445px; height:500px;">

    <iframe id="mainframe" name="mainframe" onload="parent.adjustIFrameHeight();" FRAMEBORDER="0" scrolling="no" style="overflow:hidden; border:none;" src="http://www.letsapp.it/alecianetti/" width="445" height="600"></iframe>

</div>

I would like the div (#site_content) resize dynamically on iframe content change.我希望 div (#site_content) 在 iframe 内容更改时动态调整大小。 I tried this function but I'm not very expert in using js and similar (I'm studying them now;)) so I don't know if it's useful or correct我试过这个 function 但我不是很擅长使用 js 和类似的东西（我现在正在研究它们；））所以我不知道它是否有用或正确

onload="parent.adjustIFrameHeight();"

To give you an idea of the result, I link you a demo site of ThemeForest Wave CV which is the template I'm replicating.为了让您了解结果，我给您链接了ThemeForest Wave CV的演示站点，这是我正在复制的模板。

Can anyone help me?谁能帮我？

Answer 1

Just tried it out!刚刚试了一下！

    <script type="text/javascript">
        function setIframeHeight(iframeName) {
          //var iframeWin = window.frames[iframeName];
          var iframeEl = document.getElementById? document.getElementById(iframeName): document.all? document.all[iframeName]: null;
          if (iframeEl) {
          iframeEl.style.height = "auto"; // helps resize (for some) if new doc shorter than previous
          //var docHt = getDocHeight(iframeWin.document);
          // need to add to height to be sure it will all show
          var h = alertSize();
          var new_h = (h-148);
          iframeEl.style.height = new_h + "px";
          //alertSize();
          }
        }

        function alertSize() {
          var myHeight = 0;
          if( typeof( window.innerWidth ) == 'number' ) {
            //Non-IE
            myHeight = window.innerHeight;
          } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
            //IE 6+ in 'standards compliant mode'
            myHeight = document.documentElement.clientHeight;
          } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
            //IE 4 compatible
            myHeight = document.body.clientHeight;
          }
          //window.alert( 'Height = ' + myHeight );
          return myHeight;
        }
    </script>

</head>
<body onload="setIframeHeight('ifr');">
<center>
    <iframe id="ifr" src="yourdomain!" onload="parent.adjustIFrameHeight();" width="850px" scrolling="no" ></iframe>
</center>
</body>
</html>

动态 iframe 身高

问题描述

1 个解决方案

解决方案1
1 已采纳 2012-04-11 10:59:58

动态 iframe 身高

问题描述

1 个解决方案

解决方案1 1 已采纳 2012-04-11 10:59:58

解决方案1
1 已采纳 2012-04-11 10:59:58