2023年6月20日发(作者：)

HTML+CSS之iframe碎碎：这两天在实践中，⽤到了 iframe，之前对其不甚了解，了解之中遇到好多奇葩问题，今天记录下这两天遇到的相关的内容。1. 嵌⼊的 iframe 页⾯的边框2. 嵌⼊的 iframe 页⾯的背景3. 嵌⼊的 iframe 页⾯居中4. 嵌⼊的 iframe 页⾯的滚动条5. iframe ⽗页⾯调⽤⼦页⾯6. iframe ⼦页⾯调⽤⽗页⾯1. iframe 嵌⼊页⾯的边框//HTML 元素：主要有 src: 要嵌⼊的页⾯// 默认有边框: 新建测试⽂件，命名：test_,内容如下： Title//为了⽅便区别，对应设置了样式

运⾏显⽰如下： 可以看到 iframe 嵌⼊页⾯，类似层级摞在上⾯（即 iframe层 压在原来页⾯上层），且外⾯有⽩⾊边框显⽰，这就是 iframe 默认显⽰样式。取消边框：只需在 iframe 标签中设置 frameborder 属性即可frameborder 有两种属性值：1. frameborder="0"; //⽆边框显⽰2. frameborder="1"; //有边框显⽰ （默认状态，且边框为⽩⾊）eg: 只需将上⾯⽂件中的 iframe 标签内容添加上 frameborder="0" 即可，此时全部代码如下： Title
更改后的 test_执⾏后就会看到上⾯的⽩⾊边框消失，如下：边框样式设置：当然，若想层级显⽰，但不想要默认的边框时，我们可以⾃⾏设置边框，只需给对应 iframe 页⾯设置样式时，添加上边框设置如下：给 id="framePage" 的 iframe 设置 border 属性，添加后样式如下：.iframe_page #framePage{ width: 300px; height: 200px; background-color: #adb9cd; border: 3px dashed #cc9797; //设置 iframe边框样式}更改后的完整代码如下： Title
更改后的 test_运⾏后效果如下：2. 嵌⼊的 iframe 页⾯的背景背景透明：需在 iframe 标签中添加 allowtransparency 属性设置⽹上说背景透明1. 需对
更改后的 test_3. 嵌⼊的 iframe 页⾯位置查到资料显⽰，有两种⽅式：使⽤ iframe 元素的 属性 align 进⾏设置（由于兼容性，align设置法不推荐）如下： 使⽤ float 进⾏样式设置（推荐）如下：.iframe_page #framePage{ width: 600px; height: 300px; background-color: #adb9cd; border: 3px dashed #cc9797; float: right上述两者效果⼀样，但其常⽤属性值只有： left, right， 并没有达到我们想要的居中效果 解决办法： 可让 iframe 外层的 div 元素居中，并可设置 iframe 与 外层div⼤⼩完全相同，即可实现居中如下：.iframe_page{ margin: 0 auto; width: 400px; height: 260px; background-color: #dfdfdf;}.iframe_page #framePage{ width: 400px; height: 260px; background-color: #adb9cd; border: 3px dashed #cc9797;}完整代码如下： Title
更改后的 test_4. 嵌⼊的 iframe 页⾯的滚动条使⽤ iframe 的 scrolling 属性（横/纵向⼀起控制）1. 显⽰滚动条：scrolling="yes" 或 scrolling="auto" (超出边框⾃动显⽰滚动条，且可滚动)2. 不显⽰滚动条： scrolling="no" (始终不显⽰滚动条，且超出部分不能滚动)使⽤ overflow 进⾏样式设置overflow 样式（横/纵）选项有：1. 显⽰滚动条，内容剪切，可滚动：overflow: scroll; //等价于 overflow: auto;2. 不显⽰滚动条，内容不可见，不可滚动：overflow: hidden;3. 不显⽰滚动条，内容超出框，不可滚动：overflow: visible;4. inherit: 继承⽗元素 overflow 属性横向/纵向 单项设置：overflow-x 或 overflow-y 属性值同 overflow总结以上样式:1. 滚动条显⽰ 且 可滚动查看内容2. 滚动条不显⽰ 且 不可滚动查看内容这不是我们想要的 滚动条不显⽰ 但 可滚动查看内容，即可以⾃定义滚动条样式查询资料显⽰可设置1. ⽗页⾯标准 要改为

2. 设置iframe页⾯：body, html{

scrollbar-3dlight-color:#D4D0C8; /*- 最外左 -*/

scrollbar-highlight-color:#fff; /*- 左⼆ -*/

scrollbar-face-color:#E4E4E4; /*- ⾯⼦ -*/

scrollbar-arrow-color:#666; /*- 箭头 -*/

scrollbar-shadow-color:#808080; /*- 右⼆ -*/

scrollbar-darkshadow-color:#D7DCE0; /*- 右⼀ -*/

scrollbar-base-color:#D7DCE0; /*- 基⾊ -*/

scrollbar-track-color:#;/*- 滑道 -*/

}

我测试之后完全不⾏，卡壳了⼏天，最终采⽤插件完成，在此推荐 插件roll v3.7.6

1. ⽀持div,iframe,html 等2. 兼容IE7-8,safari,firefox,webkit内核浏览器(chrome,safari)以及智能终端设备浏览器的滚动条3. jq插件，jq 版本要⾼于 1.8cursorcolor - 设置滚动条颜⾊，默认值是“＃000000”cursoropacitymin - 滚动条透明度最⼩值cursoropacitymax - 滚动条透明度最⼤值cursorwidth - 滚动条的宽度像素，默认为5（你可以写“5PX”）cursorborder - CSS定义边框，默认为“1px solid #FFF”cursorborderradius - 滚动条的边框圆⾓ZIndex的 - 改变滚动条的DIV的z-index值，默认值是9999scrollspeed - 滚动速度，默认值是60mousescrollstep - 滚动⿏标滚轮的速度，默认值是40（像素）touchbehavior - 让滚动条能拖动滚动触摸设备默认为falsehwacceleration - 使⽤硬件加速滚动⽀持时，默认为trueboxzoom - 使变焦框的内容，默认为falsedblclickzoom - （仅当boxzoom = TRUE）变焦启动时，双点击框，默认为truegesturezoom - boxzoom = true并使⽤触摸设备）变焦（仅当激活时，间距/盒，默认为truegrabcursorenabled“抢”图标，显⽰div的touchbehavior = true时，默认值是trueautohidemode，如何隐藏滚动条的作品，真正的默认/“光标”=只光标隐藏/ FALSE =不隐藏的背景下，改变铁路背景的CSS，默认值为“”iframeautoresize中，AUTORESIZE iframe上的load事件（默认：true）cursorminheight，设置最低滚动条⾼度（默认值：20）preservenativescrolling，您可以⽤⿏标滚动本地滚动的区域，⿎泡⿏标滚轮事件（默认：true）railoffset，您可以添加抵消顶部/左轨位置（默认：false）bouncescroll，使滚动反弹结束时的内容移动（仅硬件ACCELL）（默认：FALSE）spacebarenabled，允许使⽤空格键滚动（默认：true）railpadding，设置间距（默认：顶：0，右：0，左：0，底部：0}）disableoutline，Chrome浏览器，禁⽤纲要（橙⾊hightlight）时，选择⼀个div nicescroll（默认：true）nicescroll详细参数配置： 使⽤ 插件设置的 iframe 滚动条样式，举例： Title

岁⽉

岁⽉

岁⽉

岁⽉

岁⽉

岁⽉

岁⽉

岁⽉

岁⽉

岁⽉

岁⽉

岁⽉

岁⽉

岁⽉

岁⽉

岁⽉

岁⽉

岁⽉

岁⽉

岁⽉

岁⽉

岁⽉

岁⽉

⼦页⾯ inner_ Title
⽗页⾯ 运⾏结果如下：

5. iframe ⽗页⾯调⽤⼦页⾯⽅法1： iframe标签定义了 id 属性，eg: , 则 iframe 页⾯ 调⽤⼦页⾯⽅法，可使⽤mentById('myIframeId').contentWindow.***(); /* 1. myIframeId: 为 属性 id 的值 * 2. ***()⽅法 写在 ⼦页⾯（即 src 链接的⽂件）中*/⽅法2： iframe标签定义了 name 属性，eg： ,则 iframe 页⾯调⽤⼦页⾯⽅法，可使⽤ .***() /* 1. myIframeName: 为 属性 name 的值 * 2. ***()⽅法 写在 ⼦页⾯（即 src 链接的⽂件）中*/举例： 主页⾯（ -- 同时定义了 id 和 name）和⼦页⾯（inner_ ）具体内容如下： Title

主页⾯ Title ⼦页⾯ inner_6. iframe ⼦页⾯调⽤⽗页⾯iframe src链接的⼦页⾯ 调⽤ iframe⽗页⾯ ⽅法，使⽤ .***();

/* 1. .***() 等价于 parent.***() //即 window 可以省略 * 2. ***()⽅法 写在 ⽗页⾯（即 iframe标签所在的⽂件）中*/举例： 主页⾯（）和⼦页⾯（inner_）具体内容如下： Title

主页⾯ Title ⼦页⾯ inner_ 总结 5-6，⽗窗⼝与⼦窗⼝⽅法调⽤

⽅法1：id 属性法1. HTML语法：// 默认有边框: 新建测试⽂件，命名：test_,内容如下： Title//为了⽅便区别，对应设置了样式

运⾏显⽰如下： 可以看到 iframe 嵌⼊页⾯，类似层级摞在上⾯（即 iframe层 压在原来页⾯上层），且外⾯有⽩⾊边框显⽰，这就是 iframe 默认显⽰样式。取消边框：只需在 iframe 标签中设置 frameborder 属性即可frameborder 有两种属性值：1. frameborder="0"; //⽆边框显⽰2. frameborder="1"; //有边框显⽰ （默认状态，且边框为⽩⾊）eg: 只需将上⾯⽂件中的 iframe 标签内容添加上 frameborder="0" 即可，此时全部代码如下： Title
更改后的 test_执⾏后就会看到上⾯的⽩⾊边框消失，如下：边框样式设置：当然，若想层级显⽰，但不想要默认的边框时，我们可以⾃⾏设置边框，只需给对应 iframe 页⾯设置样式时，添加上边框设置如下：给 id="framePage" 的 iframe 设置 border 属性，添加后样式如下：.iframe_page #framePage{ width: 300px; height: 200px; background-color: #adb9cd; border: 3px dashed #cc9797; //设置 iframe边框样式}更改后的完整代码如下： Title
更改后的 test_运⾏后效果如下：2. 嵌⼊的 iframe 页⾯的背景背景透明：需在 iframe 标签中添加 allowtransparency 属性设置⽹上说背景透明1. 需对