iframe自適應


一:正常情況下可以用css樣式實現自適應

style代碼

  <style type="text/css">
    iframe{
    width:100%;
    height: 100%;
    }
    </style>

html代碼

 <iframe src="http://www.baidu.com" id="thisIframe"  scrolling="no" frameborder="0"></iframe>

二:但是有時候並不能用一的方法,樣式衝突吧,可以用以下方式進行自適應

以下代碼出處   https://jingyan.baidu.com/article/b87fe19eaeb2cf5218356896.html

<div id="leamain">

       <iframe src="#" marginheight="0" marginwidth="0" frameborder="0" scrolling="no" width="765" height=100% id="iframepage" name="iframepage" onLoad="iFrameHeight()" ></iframe>

<script type="text/javascript" language="javascript">

    function iFrameHeight() {

        var ifm= document.getElementById("iframepage");

        var subWeb = document.frames ? document.frames["iframepage"].document :

ifm.contentDocument;

            if(ifm != null && subWeb != null) {

            ifm.height = subWeb.body.scrollHeight;

            }

    }

</script> 

     </div>

以上親測,ie、火狐、谷歌等瀏覽器均沒問題,希望對你有用。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章