版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_27626333/article/details/77990196
1、iframe.contentWindow(主页面调用iframe)
此处的iframe是从document取得的，即作作为document的子对象出现，虽然是文档(document)对象，但由于它是独立的页面，因而拥有自己的事件，拥有自己的窗口对象(contentWindow)；contentWindow属性是指指定的frame或者iframe所在的window对象。
在IE中iframe或者frame的contentWindow属性可以省略，但在Firefox中如果要对iframe对象进行编辑则必须指定contentWindow属性。
先获取iframe里面的window对象，
var iframe = document.getElementById('myFrame').contentWindow
// 在IE下
var iframe = document.frames['myFrame']再通过这个对象，获取到里面的DOM元素
var input = iframe.document.getElementById('test')在主页面，操作iframe里面的DOM元素实例如下：
// a.html页面
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
iframe.contentWindow
</title>
<script type="text/javascript">
function getValue() {
var tmp = '';
if(document.frames) {
tmp += document.frames['myFrame'].document.getElementById('test').value;
} else {
tmp = document.getElementById('myFrame').contentWindow.document.getElementById('test').value;
}
if(confirm(tmp)) {
location.href = tmp.split(':')[1]
}
}
</script>
</head>
<body onload="getValue()">
<iframe id="myFrame" src='b.html' width="600px" height="100px;"></iframe>
</body>
</html>b.html页面
// b.html页面
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
iframe
</title>
<style>
#test {
border: solid royalblue 2px;
border-radius: 4px;
width: 500px;
color: #797979;
height: 50px;
line-height: 50px;
font-size: 20px;
}
</style>
</head>
<body>
<input type='text' id="test" value='欢迎访问：http://blog.csdn.net/qq_27626333'>
</body>
</html>2、window.parent(iframe页面调用主页面)
在iframe本页面，要操作这个iframe的父页面的DOM元素（即嵌套这个iframe的页面）可以用：window.parent、window.top(这里的TOP是获取的顶层，即有多层嵌套iframe的时候使用)
// a.html页面
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
iframe.contentWindow
</title>
<script type="text/javascript">
function parentValue() {
if(confirm('欢迎访问：http://blog.csdn.net/qq_27626333')) {
location.href = 'http://blog.csdn.net/qq_27626333'
}
}
</script>
</head>
<body>
<iframe id="myFrame" src='b.html' width="510px" height="150px;"></iframe>
</body>
</html>// b.html页面
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
iframe
</title>
<style>
.contain {
display: flex;
flex-direction: column;
width: 500px;
}
#test {
border: solid royalblue 2px;
border-radius: 4px;
width: 100%;
color: #797979;
height: 50px;
line-height: 50px;
font-size: 20px;
}
#button {
border: solid #20A0FF 2px;
border-radius: 4px;
margin: 20px auto;
padding: 10px;
background-color: #20A0FF;
color: white;
}
</style>
<script>
function parentValue() {
window.parent.parentValue()
}
</script>
</head>
<body>
<div class="contain">
<input type='text' id="test" value='欢迎访问：http://blog.csdn.net/qq_27626333'>
<input type="button" id="button" value="调用主页面方法" onclick="parentValue()"/>
</div>
</body>
</html>