HTML+CSS之iframe
碎碎：这两天在实践中，⽤到了 iframe，之前对其不甚了解，了解之中遇到好多奇葩问题，今天记录下这两天遇到的相关的内容。
1. 嵌⼊的 iframe 页⾯的边框
2. 嵌⼊的 iframe 页⾯的背景
3. 嵌⼊的 iframe 页⾯居中
4. 嵌⼊的 iframe 页⾯的滚动条
5. iframe ⽗页⾯调⽤⼦页⾯
6. iframe ⼦页⾯调⽤⽗页⾯
1. iframe 嵌⼊页⾯的边框
//HTML 元素：主要有 src: 要嵌⼊的页⾯
<iframe id="framePage" src="iframe/inner_page.jsp"></iframe>
// 默认有边框: 新建测试⽂件，命名：test_iframe01.html，内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
//为了⽅便区别，对应设置了样式
<style>
.iframe_page{
width: 400px;
height: 260px;
background-color: #dfdfdf;  //为了⽅便区别，设置背景样式
}
.iframe_page #framePage{
width: 300px;
height: 200px;
background-color: #adb9cd; //为了⽅便区别，设置背景样式
}
</style>
<body>
<!-- 嵌⼊ iframe 模块 -->
<div class="iframe_page">
<iframe id="framePage" src="inner_page.html"></iframe>
</div>
</body>
</html>
运⾏显⽰如下：
可以看到 iframe 嵌⼊页⾯，类似层级摞在上⾯（即 iframe层压在原来页⾯上层），且外⾯有⽩⾊边框显⽰，这就是 iframe 默认显⽰样式。
取消边框：只需在 iframe 标签中设置 frameborder 属性即可
frameborder 有两种属性值：
1. frameborder="0";  //⽆边框显⽰
2. frameborder="1";  //有边框显⽰（默认状态，且边框为⽩⾊）
eg: 只需将上⾯⽂件中的 iframe 标签内容添加上 frameborder="0"即可，此时全部代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.iframe_page{
width: 400px;
height: 260px;
background-color: #dfdfdf;
}
.iframe_page #framePage{
width: 300px;
height: 200px;
background-color: #adb9cd;
}
</style>
<body>
<!-- 嵌⼊ iframe 模块 -->
<div class="iframe_page">
<iframe id="framePage" src="inner_page.html" frameborder="0"></iframe>
</div>
</body>
</html>
更改后的 test_iframe01.html
执⾏后就会看到上⾯的⽩⾊边框消失，如下：
边框样式设置：
当然，若想层级显⽰，但不想要默认的边框时，我们可以⾃⾏设置边框，只需给对应 iframe 页⾯设置样式时，添加上边框设置
如下：给 id="framePage"的 iframe 设置 border 属性，添加后样式如下：
.iframe_page #framePage{
width: 300px;
height: 200px;
background-color: #adb9cd;
border: 3px dashed #cc9797;  //设置 iframe边框样式
}
更改后的完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
html frame
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.iframe_page{
width: 400px;
height: 260px;
background-color: #dfdfdf;
}
.iframe_page #framePage{
width: 300px;
height: 200px;
background-color: #adb9cd;
border: 3px dashed #cc9797;  //更改iframe边框样式
}
</style>
<body>
<!-- 嵌⼊ iframe 模块 -->
<div class="iframe_page">
<iframe id="framePage" src="inner_page.html"></iframe>
</div>
</body>
</html>
更改后的 test_iframe01.html
运⾏后效果如下：
2. 嵌⼊的 iframe 页⾯的背景
背景透明：需在 iframe 标签中添加 allowtransparency 属性设置
⽹上说背景透明
1. 需对<iframe>标签设置 allowtransparency 属性：
allowtransparency="true"//背景透明, 前提不能设置 iframe 的背景样式
2. 并对 <iframe>标签引⽤的 src="***.html"⽂件中设置：
<body > 或 <body bgcolor="transparent">
但我测试 iframe 标签设置allowtransparency=true与
iframe 背景样式不设置效果⼀样，都是没有背景（即，默认⽗元素背景样式）
!!综合来说：没到使背景透明的⽅法，如果有⼈知道⿇烦告知，谢谢~~
背景样式设置：需在 iframe 样式设置时添加背景样式设置
如下：需在 iframe 样式设置时，添加背景设置，具体代码如下：
.iframe_page #framePage{
width: 300px;
height: 200px;
background-color: #adb9cd;  //设置嵌⼊的iframe背景
border: 3px dashed #cc9797;
}
整体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.iframe_page{
width: 400px;
height: 260px;
background-color: #dfdfdf;
}
.iframe_page #framePage{
width: 300px;
height: 200px;
background-color: #adb9cd;  //更改嵌⼊的 iframe 背景颜⾊
border: 3px dashed #cc9797;
}
</style>
<body>
<!-- 嵌⼊ iframe 模块 -->
<div class="iframe_page">
<iframe id="framePage" src="inner_page.html"></iframe>
</div>
</body>
</html>
更改后的 test_iframe01.html
3. 嵌⼊的 iframe 页⾯位置
查到资料显⽰，有两种⽅式：
使⽤ iframe 元素的属性 align 进⾏设置（由于兼容性，align设置法不推荐）
如下： <iframe id="framePage" align="right" allowtransparency="true" src="inner_page.html" frameborder="0"></iframe>使⽤ 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;
}
完整代码如下：
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.
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;
}
</style>
<body>
<!-- 嵌⼊ iframe 模块 -->
<div class="iframe_page">
<iframe id="framePage" src="inner_page.html"></iframe>
</div>
</body>
</html>
更改后的 test_iframe01.html
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. ⽗页⾯标准<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 要改为 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""
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:#;/*- 滑道 -*/
}
我测试之后完全不⾏，卡壳了⼏天，最终采⽤插件完成，在此推荐 jquery.nicescroll.min.js 插件
jquery.nicescroll v3.7.6
1. ⽀持div,iframe,html 等
2. 兼容IE7-8,safari,firefox,webkit内核浏览器(chrome,safari)以及智能终端设备浏览器的滚动条
3. jq插件，jq 版本要⾼于 1.8
cursorcolor - 设置滚动条颜⾊，默认值是“＃000000”
cursoropacitymin - 滚动条透明度最⼩值
cursoropacitymax - 滚动条透明度最⼤值
cursorwidth - 滚动条的宽度像素，默认为5（你可以写“5PX”）
cursorborder - CSS定义边框，默认为“1px solid #FFF”
cursorborderradius - 滚动条的边框圆⾓
ZIndex的 - 改变滚动条的DIV的z-index值，默认值是9999
scrollspeed - 滚动速度，默认值是60
mousescrollstep - 滚动⿏标滚轮的速度，默认值是40（像素）
touchbehavior - 让滚动条能拖动滚动触摸设备默认为false
hwacceleration - 使⽤硬件加速滚动⽀持时，默认为true
boxzoom - 使变焦框的内容，默认为false
dblclickzoom - （仅当boxzoom = TRUE）变焦启动时，双点击框，默认为true
gesturezoom - boxzoom = true并使⽤触摸设备）变焦（仅当激活时，间距/盒，默认为true
grabcursorenabled“抢”图标，显⽰div的touchbehavior = true时，默认值是true
autohidemode，如何隐藏滚动条的作品，真正的默认/“光标”=只光标隐藏/ 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详细参数配置：
使⽤ jquery.nicescroll.min.js 插件设置的 iframe 滚动条样式，举例：
<!--<!DOCTYPE html>-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>岁⽉</p>
<p>岁⽉</p>
<p>岁⽉</p>
<p>岁⽉</p>
<p>岁⽉</p>
<p>岁⽉</p>
<p>岁⽉</p>
<p>岁⽉</p>
<p>岁⽉</p>
<p>岁⽉</p>
<p>岁⽉</p>
<p>岁⽉</p>
<p>岁⽉</p>
<p>岁⽉</p>
<p>岁⽉</p>
<p>岁⽉</p>
<p>岁⽉</p>
<p>岁⽉</p>
<p>岁⽉</p>
</body>
</html>
⼦页⾯ inner_page.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="code.jquery/jquery-1.12.4.min.js"></script>
<script src="jquery.nicescroll.min.js"></script>
</head>
<style>
.iframe_page{
width: 300px;
height: 260px;
background-color: #dfdfdf;
}
.iframe_page #myFrameId{
width: 280px;
height: 240px;
background-color: #adb9cd;
border: 3px dashed #cc9797;
}
</style>
<body >
<!-- 嵌⼊ iframe 模块 -->
<div class="iframe_page">
<iframe id="myFrameId" src="inner_page.html"></iframe>
</div>
<script>
$("#myFrameId").niceScroll({
cursorcolor: "#E62020",  //滚动条颜⾊
cursoropacitymax: 0.5, //滚动条透明度
touchbehavior: false,
cursorwidth:"5px",
cursorborder:"0",
cursorborderradius:"5px"
});
</script>
</body>
</html>
⽗页⾯ test.html
运⾏结果如下：
5. iframe ⽗页⾯调⽤⼦页⾯
⽅法1： iframe标签定义了 id 属性，eg: <iframe id="myIframeId"></iframe> , 则 iframe 页⾯调⽤⼦页⾯⽅法，可使⽤ElementById('myIframeId').contentWindow.***(); /* 1. myIframeId: 为属性 id 的值
* 2. ***()⽅法写在⼦页⾯（即 src 链接的⽂件）中
*/
⽅法2： iframe标签定义了 name 属性，eg：<iframe name="myIframeName"></iframe> ，则 iframe 页⾯调⽤⼦页⾯⽅法，可使⽤ myIframeName.window.***()
/* 1. myIframeName: 为属性 name 的值
* 2. ***()⽅法写在⼦页⾯（即 src 链接的⽂件）中
*/
举例：主页⾯（test.html -- 同时定义了 id 和 name）和⼦页⾯（inner_page.html ）具体内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.iframe_page{
width: 400px;
height: 260px;
background-color: #dfdfdf;
}
.iframe_page #framePage{
width: 300px;
height: 200px;
background-color: #adb9cd;
border: 3px dashed #cc9797;
}
</style>
<body>
<!-- 嵌⼊ iframe 模块 -->
<div class="iframe_page">
<iframe name="myFrameName" id="myFrameId" src="inner_page.html" onload="callChildPage()"></iframe>
</div>
<script>
/**
* ⽗页⾯⽅法：调⽤⼦页⾯的⽅法
*/
function callChildPage() {
myFrameName.window.childSayHello();  //效果等价于 ElementById("framePage").contentWindow.childSayHello();
}
</script>
</body>
</html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
/**
* ⼦页⾯⽅法：⽗页⾯要调⽤的⽅法
*/
function childSayHello() {
alert('welcome: function in child');
}
</script>
</body>
</html>
⼦页⾯ inner_page.html
6. iframe ⼦页⾯调⽤⽗页⾯
iframe src链接的⼦页⾯调⽤ iframe⽗页⾯⽅法，使⽤ window.parent.***();
/* 1. window.parent.***() 等价于 parent.***()  //即 window 可以省略
* 2. ***()⽅法写在⽗页⾯（即 iframe标签所在的⽂件）中
*/
举例：主页⾯（test.html）和⼦页⾯（inner_page.html）具体内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.iframe_page{
width: 400px;
height: 260px;
background-color: #dfdfdf;
}
.iframe_page #framePage{
width: 300px;
height: 200px;
background-color: #adb9cd;
border: 3px dashed #cc9797;
}
</style>
<body>
<!-- 嵌⼊ iframe 模块 -->
<div class="iframe_page">
<iframe id="framePage" src="inner_page.html"></iframe>
</div>
<script>
/**
* ⽗页⾯⽅法：⼦页⾯要调⽤的⽅法
*/
function parentSayHello() {
alert('welcome: function in parent.');
}
</script>
</body>
</html>
主页⾯ test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body onload="callParentFunc()">
<script>
/**
* ⼦页⾯⽅法：⽤于调⽤⽗页⾯⽅法
*/
function callParentFunc() {
window.parent.parentSayHello();  //等价于  parent.parentSayHello();
}
</script>
</body>
</html>
⼦页⾯ inner_page.html
总结 5-6，⽗窗⼝与⼦窗⼝⽅法调⽤⽅法1：id 属性法
1. HTML语法：<iframe id="myFrameId" src="child.html"></html>
2. ⽗窗⼝调⽤⼦窗⼝:
JS：ElementById("myFrameId").contentWindow.childMethod()
JQuery: $('#myFrameId')[0].contentWindow.childMethod();
3. ⼦窗⼝调⽤⽗窗⼝：window.parent.parentMethod() 或 parent.parentMethod()
⽅法2：name 属性法
1. HTML语法：<iframe name="myFrameName" src="child.html"></html>
2. ⽗窗⼝调⽤⼦窗⼝: myFrameName.window.childMethod()
3. ⼦窗⼝调⽤⽗窗⼝：window.parent.parentMethod() 或 parent.parentMethod()
注：
⽗页⾯要改变⼦页⾯某个标签中的值，eg：改变id="button"的⽂字时，可⽤：
id 属性法：ElementById("test").value = "调⽤结束";
name 属性法：myFrameName.ElementById("button").value="调⽤结束";⼦页⾯要改变⽗页⾯某个标签中的值，eg：改变id="test"的⽂字时，可⽤:
id 属性法:
JS：window.ElementById("test").value = "调⽤结束";
JQuery：$(window.parent.document).contents().find("#test").val("调⽤结束");
name 属性法：
parent.ElementById("button").value="调⽤结束";
有问题或有其他的欢迎⼤家指导哈~~

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。