您好,登錄后才能下訂單哦!
iframe高度自適應(yīng)及隱藏滾動(dòng)條的實(shí)例詳解
在工作中,我們可能會(huì)遇到自己公司和其他的公司達(dá)成合作關(guān)系,從而共同開發(fā)某個(gè)項(xiàng)目。而這時(shí)候,我們可能就需要在自己的網(wǎng)站上嵌入別人做好的頁面。而這種情況下,我們一般都會(huì)選擇去使用iframe達(dá)到我們的目的。但是iframe用起來,真的是讓人頭痛,高度無法控制,難看的滾動(dòng)條等等,下面我分享一下自己在處理iframe時(shí)的一些心得。
高度自適應(yīng)
<iframe src="http://huichang.qunar.com/huiQunar" id="myiframe" frameborder=no scrolling="yes" width="100%" ></iframe> <script type="text/javascript" language="javascript"> var ifm= document.getElementById("myiframe"); ifm.height=document.documentElement.clientHeight; </script>
高度自適應(yīng)并且隱藏滾動(dòng)條
<html> <head> <script type="text/javascript"> function showS() { document.getElementById("test").scrolling="yes"; document.getElementById("test").style.overflow="scroll"; //alert(document.getElementById("test").scrolling); } function hideS() { document.getElementById("test").scrolling="no"; document.getElementById("test").style.overflow="hidden"; //alert(document.getElementById("test").style.overflow); } </script> <style> <!-- .ifr{width:600px;height:600px;background:#fff;overflow:hidden;display:block;position:absolute;top: 0;left: 0;right: 0;} --> </style> </head> <body> <div class="ifr" onMouseOut="hideS()" onMouseOver="showS()" > <iframe id="test" width="100%" height="100%" frameborder="0" src="" ></iframe> <script language="JavaScript"> var iframe = document.getElementById("test"); iframe.src = "http://huichang.qunar.com/huiQunar"; //以下判斷iframe是否加載完,并且隱藏滾動(dòng)條 if (iframe.attachEvent){ iframe.attachEvent("onload", function(){ //hideS(); //document.getElementById("loading").style.display="none"; }); } else { iframe.onload = function(){ // hideS(); //document.getElementById("loading").style.display="none"; }; } </script> </div> </body> </html>
取巧的方式隱藏滾動(dòng)條
取巧的方式就是,我們給iframe的寬度設(shè)置成101%,這樣就可以把滾動(dòng)條隱藏到屏幕外面,在將其overflow-x設(shè)置成hiden就行。這種方法在移動(dòng)端 就沒必要了。
如有疑問請(qǐng)留言或者到本站社區(qū)交流討論,感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。