iframe现在已经用得比较少了，但是并不是所有的都没有用，这里记录下iframe的使用
父操作子
直接上代码：
//父页面
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" value="改变" id="input1">
<iframe src="iframe1.html" id="iframe1"></iframe>
<iframe src="iframe2.html" id="iframe2"></iframe>
<div id="div1">parent</div>
<input type="button" value="change1" id="change1">
<input type="button" value="change2" id="change2">
<iframe src="iframe1.html" id="iframe3" scrolling="no"></iframe>
</body>
<script>
//chorme测试需要服务器环境
//父操作子
var oInput = document.getElementById("input1");
var oIframe = document.getElementById("iframe1");
oInput.onclick = function(){
console.log(oIframe.contentWindow); // 获取到的是iframe的window对象，有了window对象，我们就可以做很多事情了...
//操作iframe中的元素 支持IE6，7 contentWindow
oIframe.contentWindow.document.getElementById("div1").style.color = "red";
//获取iframe的document IE6，7不支持
oIframe.contentDocument.getElementById('div1').style.fontSize = "80px";
}
//iframe的onload事件，IE下的iframe的onload事件只能用绑定的形式
//创建一个iframe元素
var cIframe = document.createElement('iframe');
cIframe.src = 'iframe1.html';
document.body.appendChild(cIframe);
oIframe.onload = function(){
alert(123);
}
//IE绑定形式
// oIframe.attachEvent('onload',function(){
// alert(456);
// })
//改变iframe的大小
var oInput1 = document.getElementById("change1");
var oInput2 = document.getElementById("change2");
var oIframe3 = document.getElementById("iframe3");
oIframe3.onload = function(){
function changeHeight(){
oIframe3.height = oIframe3.contentWindow.document.body.offsetHeight;
}
changeHeight()
}
</script>
</html>
子操作父
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="div1" style="height:300px; width:300px; background:yellow">iframe1</div>
<input type="button" value="改变" id="input1">
</body>
<script>
//子操作父
var oInput = document.getElementById('input1');
oInput.onclick = function(){
//获取父层的页面 window.parent
window.parent.document.getElementById('div1').style.color = 'blue';
window.parent.document.getElementById('div1').style.fontSize = '80px';
//获取最顶层，多层嵌套的情况下使用 window.top
window.top.document.getElementById('div1').style.color='red';
}
</script>
</html>