去掉iframe横向滚动条_iframe滚动条

最新推荐文章于 2022-01-10 17:33:42 发布
最新推荐文章于 2022-01-10 17:33:42 发布
阅读量426 收藏
点赞数
分类专栏： JS CSS HTML web前端 文章标签： html css iframe js ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_11613/article/details/82470954
版权
JS 同时被 3 个专栏收录
49 篇文章 0 订阅
订阅专栏
HTML
25 篇文章 0 订阅
订阅专栏
CSS
20 篇文章 0 订阅
订阅专栏

主页面加IFRAME SCROLLING="YES"

子页面
'让竖条消失:
<BODY STYLE='OVERFLOW:SCROLL;OVERFLOW-Y:HIDDEN'>
</BODY>
'让横条消失:
<BODY STYLE='OVERFLOW:SCROLL;OVERFLOW-X:HIDDEN'>
</BODY>

'还要去掉
'子页面里的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
'两个都去掉

 


iframe自动适应页面大小JS函数

//Iframe自适应高度/宽度　
function dynIframeAutoSize(iFrameName,autoType)
{
debugger
var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1];
//extra height in px to add to iframe in FireFox 1.0+ browsers
//高度
var FFextraHeight=getFFVersion>=0.1? 16 : 0 ;
//宽度
var FFextraWidth=getFFVersion>=0.1? 16 : 0 ;
var objElement = null;
if (document.getElementById)
objElement = document.getElementById(iFrameName);
else
eval('pTar = ' + iFrameName + ';');
if (objElement && !window.opera)
{
//begin resizing iframe
objElement.style.display="block";
switch(autoType)
{
case "height":
//高度
if (objElement.contentDocument && objElement.contentDocument.body.offsetHeight)
//ns6 syntax
objElement.height = objElement.contentDocument.body.offsetHeight+FFextraHeight;
else if (objElement.Document && objElement.Document.body.scrollHeight)
//ie5+ syntax
objElement.height = objElement.Document.body.scrollHeight;
break;
case "width":
//宽度
if (objElement.contentDocument && objElement.contentDocument.body.offsetWidth)
//ns6 syntax
objElement.width = objElement.contentDocument.body.offsetWidth+FFextraWidth;
else if (objElement.Document && objElement.Document.body.scrollWidth)
//ie5+ syntax
objElement.width = objElement.Document.body.scrollWidth;
break;
default:
//适应大小（高和宽）　
//高度
if (objElement.contentDocument && objElement.contentDocument.body.offsetHeight)
//ns6 syntax
objElement.height = objElement.contentDocument.body.offsetHeight+FFextraHeight;
else if (objElement.Document && objElement.Document.body.scrollHeight)
//ie5+ syntax
objElement.height = objElement.Document.body.scrollHeight;
//宽度
if (objElement.contentDocument && objElement.contentDocument.body.offsetWidth)
//ns6 syntax
objElement.width = objElement.contentDocument.body.offsetWidth+FFextraWidth;
else if (objElement.Document && objElement.Document.body.scrollWidth)
//ie5+ syntax
objElement.width = objElement.Document.body.scrollWidth;
break;
}
}
}

 

 

方法一:在父页面中

<div id="div1"><iframe name=... src=http://www.cnblogs.com/... style="Z-INDEX: 2; VISIBILITY: inherit; WIDTH: 100%; HEIGHT: 100%" frameborder="0" scrolling="no"></iframe></div>

iframe中页面:

function window.onload()
{
var div = window.parent.document.getElementById('div1');
div.style.height=document.body.scrollHeight+20;
}
方法二:

<script type="text/javascript">
//** iframe自动适应页面 **//

//输入你希望根据页面高度自动调整高度的iframe的名称的列表
//用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"]，可以只有一个窗体，则不用逗号。

//定义iframe的ID
var iframeids=["test"]

//如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏，no表示不隐藏
var iframehide="yes"

function dyniframesize()
{
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++)
{
if (document.getElementById)
{
//自动调整iframe高度
dyniframe[dyniframe.length] = document.getElementById(iframeids[i]);
if (dyniframe[i] && !window.opera)
{
dyniframe[i].style.display="block"
if (dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight) //如果用户的浏览器是NetScape
dyniframe[i].height = dyniframe[i].contentDocument.body.offsetHeight;
else if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight) //如果用户的浏览器是IE
dyniframe[i].height = dyniframe[i].Document.body.scrollHeight;
}
}
//根据设定的参数来处理不支持iframe的浏览器的显示问题
if ((document.all || document.getElementById) && iframehide=="no")
{
var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])
tempobj.style.display="block"
}
}
}

if (window.addEventListener)
window.addEventListener("load", dyniframesize, false)
else if (window.attachEvent)
window.attachEvent("onload", dyniframesize)
else
window.οnlοad=dyniframesize
</script>


使用的时候只要贴在<head></head>里面就可以了

iteye_11613
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在iframe中隐藏横向滚动条的方法大全
10-31
在iframe中隐藏横向滚动条的方法大全
JavaScript中关于iframe滚动条的去除和保留
11-27
下面通过本文给大家介绍下JavaScript中关于iframe滚动条的去除和保留的实现方法。一起看看吧！ iframe嵌入页面后，我们有时需要调整滚动条，例如，去掉全部的滚动条，去掉右边的滚动条且保留底下的滚动条，去掉底下...
iFrame只要竖滚动条，不要横滚动条的方法
baokx的专栏
06-19 1804
iFrame只要竖滚动条，不要横滚动条的方法               name="test"               marginwidth="0"               marginheight="0"               allowtransparency="true"               id="test"
html iframe禁止横向滑动_iFrame只要竖滚动条，不要横滚动条
weixin_36303283的博客
12-23 280
插入iFrame的代码如下滚动条设了自动auto，当页面内容多时，会自动出现滚动条；预想效果是出现了，但是不仅出了右侧的竖滚动条，下面左右滚动的横滚动也出现了，调整内容宽度，也一样；郁闷；虽然不影响大碍，但是觉得太不爽了。看网上有人说，设置body的css样式； body { overflow-x : hidden ; } < /style>试过之后，发现不行，有的说是IE不支持，我看可能是我的...
去除iframe内滚动条
sdmanooo的专栏
09-29 3528
iframe去滚动条应该有多种方式，在此简单总结两种： 1.在标签中添加scrolling属性，值为yes时，有滚动条，值为no时无滚动条。这种方法简单，但是页面估计不怎么好看。 2.在iframe链接的子页面的body中， 隐藏横向滚动条：  body{      overflow: scroll;      overflow-x: hidden;      overflow-y:
iFrame只要竖滚动条，不要横滚动条
weixin_30268921的博客
03-24 162
如题，就是在网页中，只显示右侧的垂直滚动条，而不要底部的水平滚动条；这个问题让我挠头了半天。做的那个管理界面，为了能让菜单在整个窗口中显示，我没有用Frame，而是用了iFrame；为了让iFrame窗口适用大小，我也用JavaScript代码做了判断；插入iFrame的代码如下(我没有设宽高，宽高有Js代码控制的，这里不再描述)<iframe src="welcome.html" name...
修改滚动条样式
梦是太匆
07-31 229
要修改的div的class名为scroll，样式如下： .scollbox::-webkit-scrollbar { /*滚动条整体样式*/ width : 10px; /*高宽分别对应横竖滚动条的尺寸*/ height: 1px; } .scollbox::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius : 5px; background-color: #033b89; } .scollbo
iframe在IE6下出现横向滚动条的解决方案
09-22
最近的项目中，遇到ie6下当iframe出现纵向滚动条时同时会出现横向滚动条。分析了代码，大致的原因是iframe中的页面有相对body的样式包含width:100%的元素。
IOS上iframe的滚动条失效的解决办法
01-05
iframe内部html的滚动条不出现。并且活生生的从500px处截断，（类似overflow：hidden的效果）下面的内容不再显示。  问题重现： 结构：  index.html : <style>　 #iframe{height:500px;} </style> ...
layer弹出层 iframe层去掉滚动条的实例代码
01-19
如下所示： function newcont(url) { var index = layer.open({ ...以上这篇layer弹出层 iframe层去掉滚动条的实例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
去掉iframe滚动条（好使！）
热门推荐
weixin_45897915的博客
04-09 1万+
iframe嵌入页面后，我们有时需要调整滚动条，例如，去掉全部的滚动条，去掉右边的滚动条且保留底下的滚动条，去掉底下的滚动条且保留右边的滚动条。那么我们应该怎么做呢？ 一：去掉全部的滚动条 第一个方法： iframe 有一个scrolling属性，它有 auto , yes , no 这三个值。 scrol...
去掉iframe横向滚动条
zhaoxiaofei0929的专栏
05-27 501
2010年01月22日 星期五 04:59 P.M.主页面加IFRAME SCROLLING="YES"子页面让竖条消失: 让横条消失: 还要去掉子页面里的http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">两个都去掉   iframe自动适应页面大小JS函数
移动端使用iframe嵌套页面 scrolling:auto，ios出现横向滚动条问题
weixin_49579700的博客
01-10 3167
移动端使用iframe嵌套页面 scrolling:auto，ios出现横向滚动条问题 一、业务需求/及问题点 业务需求:开发移动端项目时,在项目网页内引用第三方网页,为此采用<iframe src=''>标签引入第三方网页 问题一：如何让iframe嵌套页面出现滚动条? 当使用<iframe src='htttps://xxx.com'> 引入第三方页面，此时页面无法出现上下滚动条， 解决思路:需要引入iframe标签的scrolling属性：<iframe src=
iframe去掉水平滚动条
淡漠Vip的博客
08-29 5633
iframe 去掉水平滚动条 可以通过下面的方法来去掉： 在iframe 所包含的网页中添加 html { overflow-x:hidden; } 即可以去掉水平滚动条了，也可以用同样的方法去掉垂直滚动条。 原文：http://www.cnblogs.com/yangbo108/archive/2007/09/06/884365.html
html iframe禁止横向滑动_iframe横向滚动条显示
weixin_31550647的博客
03-04 1133
去掉iframe横向滚动条我做的页面比较小，可包含页面相对高些，怎样只看到纵向的而去掉横向的？让竖条没有: 让横条没有: 两个都去掉？更简单了各位高手希望帮帮忙，出现横向滚动条时什么原因，我是用iframe调用这个frameborder="0" 是边框 scrolling="no"这是滚动条iframe为什么没有滚动条(右边的内容看不到)代码内容： iframe 添加横向滚动条javascrip...
在iframe中隐藏横向滚动条。
鱼乐居
06-09 2392
在iframe中隐藏横向滚动条。删除DM中自动生成的"http://www.w3.org/TR/html4/loose.dtd">此句代码.body中这样写：
页面滚动条处理
weixin_33690963的博客
07-10 210
页面滚动条处理 GOOGLE到一些有用的资料： [DIV+CSS]XHTML下的滚动条问题 1.xhtml下滚动条的颜色问题？ 在原来的html的时候，我们可以这样定义整个页面的滚动条 body{ scrollbar-3dlight-color:#D4D0C8; /*- 最外左 -*/ scrollbar-highlight-color:#fff; /*- 左...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值