iframe 用于在网页内显示网页。
添加iframe语法
<iframe src="URL"></iframe>
URL 指向隔离页面的位置。
Iframe - 设置高度和宽度
height 和 width 属性用于规定 iframe 的高度和宽度。
属性值的默认单位是像素，但也可以用百分比来设定（比如 "80%"）。
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
Iframe - 删除边框
frameborder 属性规定是否显示 iframe 周围的边框。
设置属性值为 "0" 就可以移除边框：
<iframe src="demo_iframe.htm" frameborder="0"></iframe>
使用 iframe 作为链接的目标
iframe 可用作链接的目标（target）。
链接的 target 属性必须引用 iframe 的 name 属性：
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>
可选属性
image
iframe透明
在ie6/7/8下引入iframe的时候，它的背景默认是白色，即使设置了style=”background-color:transparent;”也无效，
但是其他浏览器(firefox,chrome,opera,ie9)都正常显示，要解决这个兼容性问题，必须用到一个属性。
给iframe设置属性：allowTransparency=”true” //设置为true允许透明,就可以解决
<body style="background-color:#00f;">
<iframe allowTransparency="true" frameborder="0" height="200" width="200" src="son.html"
scrolling="yes" id="myiframe"></iframe>
</body>
高度自适应和父子之间通信，兄弟之间通信。
iframe.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="button" value="调用子级方法" id="btn">
<div class="main">
<iframe src="index.html" frameborder="0" scrolling="no" name="win" id="win"></iframe>
</div>
</body>
<script>
//解决高度自适应
function setIframeHeight(iframe) {
if (iframe) {
//获取子级window
var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
if (iframeWin.document.body) {
//获取子级的高度赋值给iframe
iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
}
}
};
window.onload = function () {
setIframeHeight(document.getElementById('win'));
};
var btn = document.getElementById('btn');
var win = document.getElementById('win');
btn.onclick = function(){
win.contentWindow.hello();
}
function say(){
alert('ok')
}
function can(){
win.contentWindow.canS = 'hello'
}
can();
</script>
</html>
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</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>
<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>
<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>
<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>
<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>
<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>
<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>主要1111111111111111111111111111</p>
<button id="btn">调用父级方法</button>
<button id="btn1">获取父级参数</button>
</body>
<script>
//console.log(document.domain)
//document.domain = 'demo.com';
var btn = document.getElementById('btn');
var btn1 = document.getElementById('btn1');
btn.onclick = function(){
parent.say();
}
function hello(){
alert('yes')
}
function getcan(){
alert(window.canS)
}
btn1.addEventListener('click',getcan,false);
</script>
</html>
tab.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>我的</p>
<button id="btn2">兄弟之间的调用</button>
</body>
<script>
//ar win = document.getElementById('win');
var btn2 = document.getElementById('btn2');
function getcan1(){
//先获取父级，然后接着找到对应的iframe
console.log(parent.win.contentWindow.hello())
}
btn2.addEventListener('click',getcan1,true);
</script>
</html>
网友评论