如何让iframe的滚动条不显示或只显示纵向滚动条?

iframe常用于后台框架布局等,但iframe的滚动条设置问题一直是web开发者们头疼的东西,久久经验网介绍如何在W3C标准下让iframe的横向或纵向滚动条不显示

iframe去掉横向滚动条,保留竖向滚动条

解决办法(HTML+CSS):

iframe属性控制

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
  2. www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--W3C标准文档申明--> 
  3. <!--省略--> 
  4. <iframe id="mainframe" name="mainframe" src="test.html" frameborder="0" scrolling="no" width="100%" height=100%></iframe> 
  5. <!--省略--> 

iframe css样式控制

  1. /*在iFrame的包含页面test.html里加入样式*/ 
  2. html { overflow-x:hidden; } 

 

iframe同时去掉横向滚动条和竖向滚动条

解决办法(HTML+CSS+JS)

在前面的基础上,加上JS实时控制高度

  1. //iframe实时设置高度 
  2. function resizeIframe() { 
  3.     var winY= $(window).height();//窗体高度 
  4.     var mainFrameY= winY - 80;//假设80为头部高度 
  5.     $("#mainframe").height(mainFrameY); 
  6. window.setInterval("resizeIframe()", 200);//定时器,每个200ms实时设置高度 

 

点击查看HTML <frameset> 标签的用法

 

相关经验

导读书签
书签初始化中…