iframe框架套iframe页面滚动条的问题，一切没问题，就差在FF个IE7上测试了~

最新推荐文章于 2022-11-28 08:01:49 发布
最新推荐文章于 2022-11-28 08:01:49 发布
阅读量1.7k 收藏
点赞数
文章标签： iframe 框架 测试 ie xhtml html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luzuocheng_1503/article/details/4547140
版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
body {
 margin-left: 0px;
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
 background-color: #33CCFF;
}

-->
</style></head>

<body>

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
<iframe src="3.html" width="100%" height="100%" name="Mainv" id="Mainv" scrolling="no" marginheight="0" marginwidth="0" frameborder="0" οnlοad="this.height=this.contentWindow.document.body.scrollHeight"></iframe>
    </td>
  </tr>
</table>

</body>
</html>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--

body {
 margin-left: 0px;
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
}
-->
</style>
</head>

<body>
<table width="1004" height="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="206" height="100%" valign="top">
    <iframe id="iFrame2" name="iFrame2" width="206" οnlοad="this.height=iFrame2.document.body.scrollHeight" frameborder="0" src="4.html"></iframe>
</td>
    <td width="4" bgcolor="#00FF00">&nbsp;</td>
    <td width="956" valign="top">
    <iframe id="iFrame3" name="iFrame3" width="956" οnlοad="this.height=iFrame3.document.body.scrollHeight" frameborder="0" src="5.html"></iframe>
</td>
  </tr>
</table>
</body>
</html>

 

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
body {
 margin-left: 0px;
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
 background-color: #FF00FF;
}
-->
</style></head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="345">&nbsp;</td>
  </tr>
</table>
</body>
</html>

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--

body {
 margin-left: 0px;
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
 background-color: #33CCFF;
}
-->
</style>
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="945">uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu234567800000000000000000000000000009123456789</td>
    <td width="20" style=" width:20px; padding-right:20px;">&nbsp;</td>
  </tr>
</table>
</body>
</html>

 

 

但是还有个问题，就是里面的页面的最右边少了20PX的内容。做的时候在右边加个代码就没问题了~

 

注意细节问题~就是没问题了~

 

luzuocheng_1503
关注
父页面用jquery.jscrollpane.js初始化滚动条后，iframe子页面滚动条并不能滚动
yuanye的博客
10-09 2051
前段时间做项目，遇到一个问题，就是父页面用的jquery.jscrollpane.js插件初始化的滚动条在iframe加载的子页面上并不能使用鼠标滚轮进行滚动。 经过一番排查，发现当鼠标滚轮滚动到子页面上的时候，并不能够触发父页面上的鼠标滚轮事件，进而导致滚动条不能滚动。 页面布局如下图，其中1部分代表iframe页面，2部分代表父页面。 ![页面布局](http://img.blog.csdn.n
不使用iframe,div+css滚动条效果
weixin_34216036的博客
05-15 72
2019独角兽企业重金招聘Python工程师标准>>> ...
IE6与IE7 8下iframe滚动条问题
CS_wuxiang的专栏
04-19 3342
1、IE6 7 8 横竖滚条动不显显示采用    2、对于只显示横或竖滚动条：         a.IE6只能控制html里的style.overfowX与overfowY="hidden"来调整,         b.7 8 可以通过body一层来控制 代码： JS:    document.getElementById("aa").contentWindow.doc
如何让iframe框架和主页面共用一个滚动条(也称为：iframe高度自适应问题)
weixin_30873847的博客
08-09 1212
最近在前端页面遇到了一个问题，我在一个页面中利用iframe框架引入了一个页面进来，但是这个页面的高度是不叫高的，高出电脑屏幕很多， 所以就引发了iframe框架一个滚动条，然后主页面一个滚动条，这样页面就出现了两个滚动条。在网上查了好久，一直没有好的方法，直到我在 网上看到了iframe高度自适应，才解决了这个问题。 自适应的意思是，iframe框架的高度自动适应引入的HTML文...
一个作为iframe嵌入的frame 作用是滚动浏览
智在居士草堂
04-14 1544
代码片断：…… var actualwidth=; var copyspeed=2; var part1,part2; function fillup(){  //他们用于循环取得数据：  part1=document.all.part2;//第一个显示框  part2=document.all.part3;//第二个显示框  actualwidth=part1.offsetWidth;  p
控制IFrame里的页面滚动原来如此简单：）
01-25 985
图片控制页面滚动 　常用效果之一 步骤一：在当前网页中插入其它网页//a1为框架名，可自定义；//page.htm为在当前网页中需插入的另一网页；//scrolling为是否要在插入网页的框架中显示滚动条（yes：显示；no：不显示）。　步骤二：分别在需加移动指示处插入指示图片//其中的图片地址和名称以及框架名a1均可根据实际设定进行修改。效果果然不错！收藏一下：）
iframe 自适应高度[在IE6 IE7 FF下测试通过]
12-03
在实际应用中，尤其是当`iframe`内容的高度不可预知时，自适应高度的功能变得尤为重要，因为它可以确保内容完全可见而无需滚动条。本文将详细介绍两种在IE6、IE7和Firefox下测试通过的`iframe`自适应高度的方法。 #...
JQuery IFrame框架高度自适应（支持嵌套–兼容IE,ff,safafi,chrome）
04-13
本主题聚焦于一个特定的应用场景——"JQuery IFrame框架高度自适应"，这是一个常见需求，尤其是在构建跨浏览器的多页面应用时。通过使用jQuery来实现iframe的高度自适应，我们可以确保内容在不同浏览器（包括IE、...
JQuery自适应IFrame高度（支持嵌套 兼容IE,ff,safafi,chrome）
10-28
总结来说，通过jQuery，我们可以优雅地处理IFrame的高度自适应问题，确保在各种浏览器环境下都能正确显示IFrame的内容，避免滚动条的出现和内容被截断。同时，通过设定最小高度和选择正确的内部元素，我们可以进一步...
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
10-29
经过上述调整，这个高度自适应的`iframe`解决方案能够在IE、FF和Opera上正常工作，不再出现纵向滚动条，确保了用户体验的一致性。然而，值得注意的是，这个方法可能不适用于所有情况，例如Safari、Chrome等其他...
页面内嵌入iframe出现滚动条
drawlessonsfrom的博客
06-17 5656
一、问题出现原因 iframe可以在原有的页面中嵌入一个新的页面，在所嵌入的新的页面中会出现相关的滚动条。 二、问题解决方案 直接控制iframe框架，使其不能出现滚动条。具体相关的代码如下所示： <iframe :src="srcUrl" frameborder="0" scrolling="no"></iframe> 以上相关的关键代码为： frameborder="0" scrolling="no" ...
关于iframe的页面加载出现滚动条的问题
最新发布
分享日常bug
11-28 1460
【代码】关于iframe的页面加载出现滚动条的问题。
解决iframe出现两个滚动条的问题
fengzi_manong的博客
07-21 6966
花了一个多小时，终于解决了因为iframe框架出现两个滚动条的问题。原理( 借鉴了网上kaka的思路，但是js与他写的不一样)是： 1.强制隐藏最上层窗口的滚动条 2.获取浏览器窗口的高度 3.用浏览器窗口的高度减去头部iframe的高度就是内容iframe的高度了             main     ">          $(function(){     
ace admin v1.4 解决iframe中显示表格宽度超过边界时，横向滚动条不出现问题
07-11 303
原来用的ace admin 横向滚动条是正常的，升级为最新版本的ace admin前端框架后横向滚动条不显示了，找了一天问题，最后发现ace.min.css中有如下设置： @media only screen and (max-width:991px) { body { overflow-x: hidden } 改为： @media only screen...
包含iframe子页面的滚动条设置
leafly05的博客
07-27 1460
场景： 页面A 包含通过iframe包含子页面B ，设置各处的overflow为auto，结果纵向滚动条是iframe的，横向滚动条是子页面body的，只有当纵向滚动条拉到页面最下方横向滚动条才能显示，页面显示实在诡异。搞了半天，最后听说是文档类型doctype闹的，试了试，居然解决了。 目标： 根据子页面B 内容动态只显示一套滚动条，并且纵向横向滚动条均可见。 方法： 1、隐藏...
iframe scroll 事件
jazywoo_在路上
03-15 4553
今天想为iframe添加scroll事件绑定 $("#frame").bind("scroll",handler); 结果发现不行 百度了一下，如下表示 var frm = document.getElementById("mainFrame").contentWindow;     frm.onscroll = frameScroll; function frameScrol
解决iframe滚动条问题
piscailei@blog.csdn.net
10-11 5699
解决方案一：去掉文件开头的文档声明。不使用"DOCTYPE "文档声明(详细代码在下面)的话很容易就过去了。但是不使用文档声明，一是代码不规范，二是不能获得文档的高度。 下面的代码执行的结果是pageHeight=160px;，而实际上B文件的高度（长度）是800px左右。var pageHeight = (document.body.clientHeight?document.bod
iframe滚动条控制：显示与隐藏策略
5. **直接在iframe标签中控制滚动条**：除了在父页面中控制滚动条，也可以直接在iframe标签中设置`scrolling`属性，如`<iframe scrolling="no">`。 值得注意的是，这些解决方案可能受到不同浏览器的兼容性影响，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值