javascript原生和jquery庫實現(xiàn)iframe自適應高度和寬度

字號:


    這篇文章主要介紹了javascript原生和jquery庫實現(xiàn)iframe自適應內(nèi)容高度和寬度,需要的朋友可以參考下。
    javascript原生和jquery庫實現(xiàn)iframe自適應內(nèi)容高度和寬度---推薦使用jQuery的代碼!
    ‍<iframe src="index.php" id="mainiframe" name="mainiframe" frameborder="0" scrolling="no" marginwidth="0" marginheight="0"></iframe>
    基于Jquery庫的代碼很好實現(xiàn):
    <script language="javascript" type="text/javascript">
    $(document).ready(function(){
    $("#mainframe").load(function(){
    $(this).height(0); //用于每次刷新時控制IFRAME高度初始化
    var height = $(this).contents().height() + 10;
    $(this).height( height < 500 ? 500 : height );
    });
    });
    </script>
    ‍基于JS原生代碼的實現(xiàn):
    <script language="javascript">
    if (window.parent.length>0){window.parent.document.all.mainframe.style.height=document.body.scrollHeight;}
    </script>
    只需在你被iframe調(diào)用的文件</body>之后加入上面這段即可!
    這個也可以控制iframe的高度隨內(nèi)容的多而自動增長
    <iframe name="web" frameborder=0 height="100%" src="index.php" id="web" onload="this.height=web.document.body.scrollHeight+20" ></iframe>
    jquery庫實現(xiàn)iframe自適應內(nèi)容高度和寬度。