`

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

htmlcssiframejs 
阅读更多

主页面加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.onload=dyniframesize
</script>


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

分享到：
| 登录、注册的用户名去空格
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    自动调节iframe高度，而不显示其滚动条 js

    ### 自动调节iframe高度，而不显示其滚动条 js #### 背景介绍 在网页开发过程中，经常会遇到需要在一个页面内嵌入另一个页面的情况，这时通常会使用HTML中的`iframe`元素来实现。然而，当嵌入的内容高度不确定或者...

    JavaScript中关于iframe滚动条的去除和保留

    下面通过本文给大家介绍下JavaScript中关于iframe滚动条的去除和保留的实现方法。一起看看吧！ iframe嵌入页面后，我们有时需要调整滚动条，例如，去掉全部的滚动条，去掉右边的滚动条且保留底下的滚动条，去掉底下...

    layer弹出层 iframe层去掉滚动条的实例代码

    在这个问题中，我们关注的是如何在layer弹出层中的iframe层去除滚动条，以保持页面的整洁和用户体验。 首先，让我们深入理解一下涉及到的几个概念： 1. **layer**：Layer是基于jQuery的一个轻量级的弹窗插件，提供...

    在iframe中隐藏横向滚动条的方法大全

    ### 在iframe中隐藏横向滚动条的方法大全 #### 概述 在网页开发中，经常会用到`&lt;iframe&gt;`标签来嵌入其他页面或内容。然而，有时候这些嵌入的内容可能会导致横向滚动条出现，影响用户体验及整体美观度。本文将详细...

    iframe在IE6下出现横向滚动条的解决方案

    在深入探讨如何解决IE6下iframe出现横向滚动条的问题之前，我们需要了解几个关键的前端技术概念，包括iframe的使用、IE6浏览器的特殊性以及CSS（层叠样式表）和JavaScript（JS）的运用。 首先，iframe（内联框架）...

    IOS上iframe的滚动条失效的解决办法

    iframe内部html的滚动条不出现。并且活生生的从500px处截断，（类似overflow：hidden的效果）下面的内容不再显示。  问题重现： 结构：  index.html : &lt;style&gt;　 #iframe{height:500px;} &lt;/style&gt; ...

    vue.js-div滚动条隐藏但有滚动效果的实现方法

    在开发前端页面时，经常会有需要隐藏滚动条但保留滚动功能的场景，这样的设计可以让页面看起来更加简洁美观，同时也使得用户能够继续享受滚动带来的便捷。在Vue.js框架中，我们可以通过一些方法来实现这样的效果。 ...

    css设置滚动条颜色与样式以及如何去掉与隐藏滚动条

    /* 去掉横向滚动条 */ overflow-y: hidden; /* 去掉纵向滚动条 */ } ``` 在HTML中，你也可以直接在`&lt;body&gt;`标签上设置`scroll`属性来控制滚动条的显示： ```html &lt;body scroll="no"&gt; &lt;!-- 去掉所有滚动条 --&gt; ;...

    js网页设计的一些东西控制横向和纵向滚动条的显隐记录并显示网页的最后修改时间

    - 同样地，利用`overflow-x`属性可以控制横向滚动条。 - 设置`&lt;body style="overflow-x:hidden"&gt;`可以隐藏水平方向上的滚动条。 - 这在处理图片轮播、固定宽度布局时非常有用。 3. **综合控制**： - 如果希望...

    jQuery中Nicescroll滚动条插件的用法

    Nicescroll是一个基于jQuery的滚动条插件，它提供了一个美观且功能丰富的自定义滚动条解决方案。该插件几乎支持所有主流浏览器，包括IE6+，并能适用于触摸屏设备，具有很低的侵入性和高兼容性。利用Nicescroll，...

    50条网页制作小技巧集锦.pdf

    1. **滚动条控制**：通过CSS样式，可以轻松控制网页的横向和纵向滚动条的显示和隐藏。例如，`overflow-y:hidden`用于隐藏垂直滚动条，`overflow-x:hidden`用于隐藏水平滚动条，而`&lt;body scroll="no"&gt;`则可以同时去掉...

    Dreamwear设计常用代码 1-6.docx

    1. 控制横向和纵向滚动条的显隐： 在HTML中，通过设置`&lt;body&gt;`标签的`style`属性，可以控制页面的滚动条行为。例如，`overflow-y:hidden`将隐藏垂直滚动条，只允许水平滚动；`overflow-x:hidden`则隐藏水平滚动条，...

    网页制作经典技巧24条

    7. **隐藏IFRAME滚动条**：有三种方法：(1)设置`scrolling="no"`；(2)在被包含页的`&lt;body&gt;`应用`overflow:hidden`；(3)在被包含页的`&lt;body&gt;`标签添加`scroll="no"`。 8. **添加背景音乐**：对于IE浏览器，使用`...

    dreamweaver代码汇编.pdf

    1. **滚动条控制**：通过设置`&lt;body&gt;`标签的样式属性，可以控制页面的横向和纵向滚动条的显示和隐藏。例如，`overflow-y:hidden`将隐藏垂直滚动条，`overflow-x:hidden`则隐藏水平滚动条，而`scroll="no"`则同时隐藏...

    js非常好用的代码,不要错过!

    - `overflow-x:hidden` 隐藏横向滚动条，内容在水平方向不可滚动。 - `scroll="no"` 则可以同时隐藏横向和纵向滚动条，使整个页面不可滚动。 2. 表格单元格（TD）的鼠标交互效果： - `onmouseover` 和 `...

    网页制作人员必看的24条技巧

    通过CSS样式`overflow-y`或`overflow-x`属性，可以分别控制页面纵向或横向滚动条的显示与隐藏，优化页面布局。 ### 15. 在FrontPage2000中插入Flash动画 在FrontPage编辑器中，通过菜单操作可以轻松插入Flash动画...

    HTML测试题

    如为自动：则自动出现滚动条；如为是，则显示滚动条。边框宽度参数设置内联框架的边框宽度，为了与邻近的内容相融合，常设置为越大越好。 4. Iframe 的使用：Iframe 是 Inline Frame 的缩写，一般被称作内联框架...

    《程序天下：JavaScript实例自学手册》光盘源码

    17.9 为textarea加横向滚动条 17.10 记录滚动条位置 17.11 彩色滚动条 17.12 Windows XP的滚动条 第18章 在线考题案例 18.1 在线考试代码 18.2 在线考试代码（二） 18.3 在线测试代码（三） 18.4 多选考试题 18.5 ...

Magicbox
Global site tag (gtag.js) - Google Analytics