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>