`
cqh520llr
  • 浏览: 509659 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
文章分类
社区版块
存档分类
最新评论

iframe高度自适应,去掉滚动条

 
阅读更多
不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 iframe的大小却不像层那样可以“伸缩自如”,所以带来了使用上的麻烦,给iframe设置高度的时候多了也不好,少了更是不行,现在,让我来告诉大家一种iframe动态调整高度的方法,主要是以下JS函数:

程序代码

function SetWinHeight(obj)

{

var win=obj;

if (document.getElementById)
{

if (win && !window.opera)

{

if (win.contentDocument && win.contentDocument.body.offsetHeight)
  
win.height = win.contentDocument.body.offsetHeight;
   
else if(win.Document && win.Document.body.scrollHeight)
  
win.height = win.Document.body.scrollHeight;

}

}

}

最后,加入iframe,不能丢掉onload属性,当然了,id也必须也函数中的win匹配

程序代码

<iframe width="778" align="center" height="200" id="win" name="win" onload="Javascript:SetWinHeight(this)" frameborder="0" scrolling="no"></iframe>

另一种情况的iframe解决方案(超简单)

重要提示:src=中你必须填写的网页地址,一定要和本页面在同一个站点上,否则,会抱错,说“拒绝访问!”(实际上这是因为Js的跨域问题导致拒绝访问的)

之前自己也碰到过这个问题,为了得到答案去网上搜索,发现有不少人也遇到了这样的问题,现在就把解决方法共享一下

1、建立一个bottom.js的文件,然后输入下面的代码(只有两行哦)

parent.document.all("框架ID名").style.height=document.body.scrollHeight;

parent.document.all("框架ID名").style.width=document.body.scrollWidth;

这里的 框架ID名 就是Iframe的ID,比如:

<IFRAME id="框架ID名" name="left" frameBorder=0 scrolling=no src="XXX.asp" width="100%"></IFRAME>

2、给你网站里所有的被包含文件里面每个都加入

<script language = "JavaScript" src = "bottom.js"/></script>

3、OK,收工!

在WINXP、IE6下面测试通过。很简单吧!

实现 iframe 的自适应高度

实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象。

程序代码

<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);

if (dyniframe && !window.opera)

{

dyniframe.style.display="block"

if (dyniframe.contentDocument && dyniframe.contentDocument.body.offsetHeight) //如果用户的浏览器是NetScape
dyniframe.height = dyniframe.contentDocument.body.offsetHeight;

else if (dyniframe.Document && dyniframe.Document.body.scrollHeight) //如果用户的浏览器是IE

dyniframe.height = dyniframe.Document.body.scrollHeight;

}

}

//根据设定的参数来处理不支持iframe的浏览器的显示问题

if ((document.all || document.getElementById) && iframehide=="no")

{

var tempobj=document.all? document.all[iframeids] : document.getElementById(iframeids)

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>

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1608312
分享到:
评论

相关推荐

    iframe窗口高度自适应的又一个巧妙实现思路

    `other.html`的内容可能会动态增加或减少,我们需要去掉`iframe`的滚动条并确保所有内容都能完整显示。然而,由于同源策略的限制,我们不能直接在`index.html`中获取`other.html`的高度并调整`iframe`的大小。 为了...

    iframe自适应内嵌页的高试,无srcoll

    至于去除滚动条,可以设置`iframe`的CSS样式: ```css iframe { overflow: hidden; border: none; /* 可选,去除边框 */ } ``` `overflow: hidden`将隐藏任何超出`iframe`边界的元素,从而隐藏滚动条。然而,这...

    iframe窗口高度自适应的实现方法

    domainA 中有一个页面index.html,通过iframe嵌套了domainB中的一个页面other.html由于other.html页面在iframe中显示,而且其页面内容会动态的增加或减少,现在需要去掉iframe的滚动条由于javascript同源策略的限制...

    Iframe自适应高度兼容ie,firefox多浏览器

    接下来将详细探讨实现Iframe自适应高度的方法以及跨浏览器兼容性的关键点。 首先,Iframe是一种在网页中嵌入另一个HTML文档的方式,可以视为一个网页内的“网页窗口”。它具有自己的URL,可以独立加载内容。但是,...

    iframe自适应宽度、高度 ie6 7 8,firefox 3.86下测试通过

    在函数内部,首先创建一个新的`iframe`元素,并设置其`src`属性、`scrolling`属性(设置为"no"以隐藏滚动条)以及`frameborder`属性(设置为"0"以消除边框)。同时,设置了`iframe`的`id`和`name`属性,它们都与`...

    iframe显示全部内容代码

    &lt;iframe src="url" width="宽度" height="高度" frameborder="边框宽度" scrolling="是否显示滚动条" allowfullscreen="是否允许全屏"&gt;&lt;/iframe&gt; ``` 2. **关键属性解释**: - `src`:指定要嵌入的源文档的URL。...

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

    5. **IFrame自适应高度**:通过JavaScript,可以实现IFrame的高度自适应,例如,当IFrame内容发生变化时,更新IFrame的高度。这可以通过监听`onload`事件并修改IFrame的`style.height`来实现。 6. **浏览器图标设置...

    html技巧代码

    - 自适应高度的iframe:通过`onload`事件和JavaScript动态调整高度,确保内容完全显示。 5. **设置浏览器图标(Favicon)**: - `&lt;link rel="Shortcut Icon" href="favicon.ico"&gt;` 用于IE和其他现代浏览器,将...

    巧妙的最大化动态载入IFrame的方法

    `scrolling="Auto"`允许或禁止IFrame内的滚动条,`frameborder="0"`用于去除边框,而`marginwidth="0" marginheight="0"`则消除外边距,使得IFrame尽可能紧凑。 接下来是JavaScript部分: ```javascript var f =...

    包含一些常用js源码

    - `scrolling`:设置IFRAME内部页面是否显示滚动条,默认为auto(根据内容自适应)。 - `topmargin` 和 `leftmargin`:设置IFRAME在容器内的位置。 ### 2. 页面过渡效果 可以通过`&lt;meta&gt;`标签添加页面进入和退出...

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

    5.8 iframe自适应高度 5.9 类似MSN的消息提示 5.10 只打印iframe的内容 第6章 下拉列表特效 6.1 下拉框实现多选 6.2 实现两个select的同步 6.3 被选中的列表项下次不能再选 6.4 不带滚动条的select 6.5 从一个下拉...

    程序天下:JavaScript实例自学手册

    5.8 iframe自适应高度 5.9 类似MSN的消息提示 5.10 只打印iframe的内容 第6章 下拉列表特效 6.1 下拉框实现多选 6.2 实现两个select的同步 6.3 被选中的列表项下次不能再选 6.4 不带滚动条的select 6.5 从一个下拉...

    jj-learning:工作学习中的积累,作为沉淀也是财富。有错误的地方或者建议可以web_jwq@163.com联系我~

    滚动条-内外不联动处理-源码 输入框-光标处理方法-源码 输入框-去除浏览器记住密码功能-源码 输入框-自适应宽高(依赖 jquery)-源码 JAVASCRIPT 原生 Dom 实用语句 标签页关闭事件监听 Ajax 中的 XMLHttpRequest 对象...

    VeryIDE Bee 互动营销**台 v1.5 UTF-8.rar

    优化 IE6 兼容性若干问题(打开窗口空白、页面滚动条、右下角小提示变形等) 优化 为部分现代浏览器增加 CSS3 效果,例如圆角、阴影等 优化 后台操作窗口拖动不流畅的问题,以及窗口随屏幕尺寸自适应的问题 优化 ...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -修正Form不能自适应浏览器大小的改变(feedback:kaywood)(WorkItem#6309)。 -增加重载方法Alert.Show(message, title, icon)(feedback:TheBox)(WorkItem#6353)。 -为容器控件(比如Panel,Region,Tab等)增加AJAX...

    ExtAspNet_v2.3.2_dll

    -修正Form不能自适应浏览器大小的改变(feedback:kaywood)(WorkItem#6309)。 -增加重载方法Alert.Show(message, title, icon)(feedback:TheBox)(WorkItem#6353)。 -为容器控件(比如Panel,Region,Tab等)增加AJAX...

    百度留言本js 大家可以参考下

    这些条件语句主要用于适配不同浏览器间的差异,比如滚动条宽度、IFRAME高度等。 ##### 3.2 动态调整留言面板位置 - 在 `baiduMsg` 函数中,通过获取当前滚动条位置 (`scrollPosTop`, `scrollPosLeft`) 以及文档...

    KODExplorer 芒果云-资源管理器

    - 选中文件时,移动到屏幕可视区域(解决上下左右选中文件滚动条不一致问题) ###ver2.51 `2014/6/22` ---- ####fix bug:(bug解决和程序优化) - 登陆多次密码输入错误验证码bug解决 - 修复漏洞:创建副本加入...

    网际畅游 MyIE 3.0 源代码

    你也可以将某个Frame或IFrame的URL加入窗口过滤器,这个Frame或IFrame以后就不会下载了。 使用*过滤窗口:在过滤广告窗口时可以在URL中使用*来过滤一批相似的地址。但你可不要用*把所有的窗口都过滤掉哦! ...

Global site tag (gtag.js) - Google Analytics