社区
分析与设计
帖子详情
怎样用Ifream怎样设置可以实现没有滚动条就可以看到全部的内容
ruanzheng_dotnet
2009-04-08 09:43:44
就是我设置有滚动条就可以看到全部的内容,但是有2个滚动条,不怎么好看,但是我如果不设置滚动条,就看不到全部的内容,所以现在请教各位大虾,可不可以帮帮忙?
...全文
220
2
打赏
收藏
怎样用Ifream怎样设置可以实现没有滚动条就可以看到全部的内容
就是我设置有滚动条就可以看到全部的内容,但是有2个滚动条,不怎么好看,但是我如果不设置滚动条,就看不到全部的内容,所以现在请教各位大虾,可不可以帮帮忙?
复制链接
扫一扫
分享
转发到动态
举报
AI
作业
写回复
配置赞助广告
用AI写文章
2 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
itliyi
2009-04-11
打赏
举报
回复
框架根据页面大小自动调整
<iframe id="myframe" src="#" frameborder=0 width="100%" height="500px" scrolling=no onload="SetWinHeight(this)" style="border-bottom:0px; border=0px"></iframe>
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;
}
}
}
sxdinfo
2009-04-08
打赏
举报
回复
有两种方法:一是在包含iframe的页面中加入下面的代码,然后在iframe的onload事件中使用这个函数。不过,在实际使用中,如果iframe中的页面还包含iframe的话,就没有作用了,那就可以使用第二种方法。这种方法的好处是,只需要在iframe的页面中使用一次即可,减少工作量。
<script language="JavaScript">
//** iframe自动适应页面 **//
//输入你希望根据页面高度自动调整高度的iframe的名称的列表
//用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"],可以只有一个窗体,则不用逗号。
//定义iframe的ID
var iframeids=["content"]
//如果用户的浏览器不支持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>
方法二:在页面中加入如下代码,就能保证iframe能完全显示页面了,但是缺点是必须每个页面都加上这段代码。
<script language="javascript" type="text/javascript">
function resize(){
resizePx(document.body.scrollHeight);
}
function resizePx(pxValue){
var pageHeight = pxValue>453?pxValue:453;
parent.document.getElementById('ifmain').style.height = pageHeight+"px";
}
window.onload=resize;
window.onresize = resize;
</script>
iFream自动获取高度
iFream自动获取高度
用DIV仿iframe框架布局效果
用DIV仿iframe框架布局效果
Iframe框架高度自适应的
实现
.doc
Iframe框架高度自适应的
实现
.doc
iframe根据页面
内容
自适应高度和宽度
iframe根据引用的页面
内容
自适应高度和宽度,直接查看例子,简单易操作
Vue组件中
实现
嵌套页面(iframe)功能
资源下载链接为: https://pan.quark.cn/s/f989b9092fc5 在 Vue.js 开发中,利用 iframe
实现
嵌套页面是一种常见方式。iframe 能在 Vue 应用里嵌入独立 HTML 文档,适用于展示第三方
内容
、
实现
特定功能或处理复杂交互场景。在 Vue 中使用 iframe,只需在模板插入 iframe 标签并
设置
属性,将要嵌入的页面放于项目静态资源目录(如 static 文件夹),以便开发环境下 Vue CLI 正确加载。例如: 此例中,src 指定页面路径,width 和 height 定义尺寸,frameborder="0" 去边框,scrolling="auto" 控制
滚动条
,style
设置
位置。 但实际使用 iframe 会遇到问题。比如浏览器回退功能问题,用户在 iframe 内操作后回退,浏览器仅回退 iframe 内历史记录,而非整个 Vue 应用。解决方法是借助 HTML5 的 history 对象,监听 popstate 事件并重定向到期望的 Vue 页面。示例代码如下: 还有 iframe 中的请求问题,其网络请求与 Vue 层通信独立。若 iframe 需从 Vue 父页面获取数据,可通过 URL 参数或 postMessage API
实现
跨窗口通信。请求示例代码如下: iframe 在 Vue 中功能强大,但需处理回退行为、跨窗口通信等问题。妥善解决这些问题,能让 iframe 在 Vue 应用中更好发挥作用。设计
实现
时,应尽量避免不必要使用 iframe,以保持应用简洁性和可维护性。
分析与设计
13,189
社区成员
5,759
社区内容
发帖
与我相关
我的任务
分析与设计
.NET技术 分析与设计
复制链接
扫一扫
分享
社区描述
.NET技术 分析与设计
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章