iframe高度自适应及隐藏滚动条的实例详解
iframe高度自适应及隐藏滚动条的实例详解
在工作中,我们可能会遇到自己公司和其他的公司达成合作关系,从而共同开发某个项目。而这时候,我们可能就需要在自己的网站上嵌入别人做好的页面。而这种情况下,我们一般都会选择去使用iframe达到我们的目的。但是iframe用起来,真的是让人头痛,高度无法控制,难看的滚动条等等,下面我分享一下自己在处理iframe时的一些心得。
高度自适应
varifm=document.getElementById("myiframe"); ifm.height=document.documentElement.clientHeight;
高度自适应并且隐藏滚动条
functionshowS() { document.getElementById("test").scrolling="yes"; document.getElementById("test").style.overflow="scroll"; //alert(document.getElementById("test").scrolling); } functionhideS() { document.getElementById("test").scrolling="no"; document.getElementById("test").style.overflow="hidden"; //alert(document.getElementById("test").style.overflow); } variframe=document.getElementById("test"); iframe.src="http://huichang.qunar.com/huiQunar"; //以下判断iframe是否加载完,并且隐藏滚动条 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"; }; }
取巧的方式隐藏滚动条
取巧的方式就是,我们给iframe的宽度设置成101%,这样就可以把滚动条隐藏到屏幕外面,在将其overflow-x设置成hiden就行。这种方法在移动端就没必要了。
如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!