在P页面里嵌入iframe显示C1页面,然后在C1页面里写javascript代码操控P页面,主要是调用P页面的函数。
其中,还做了个跳转的页面C2,试验iframe跳转的新页面C2是否也能控制parent页面P。
1,parent.html页面内容:
复制代码 代码示例:
<html>
<head>
<title>父页面P--www.jb200.com</title>
<script type="text/javascript">
function sayHello(){
alert("Hello");
}
</script>
</head>
<body>
<div id="messagebox" style="border:1px solid red;width:300px;height:30px;"></div><br/><br/>
<iframe width="500" height="300" src="child.html"/>
</body>
</html>
2,child.html如下:
复制代码 代码示例:
<html>
<head>
<title>子页面C1</title>
<script type="text/javascript">
function parentWrite(){
var content = prompt();
window.parent.document.getElementById("messagebox").innerHTML=content;
}
function sayHello(){
window.parent.sayHello();
}
</script>
</head>
<body>
<input type="button" value="跳转" onclick="window.location.href='redirect.html'"/>
<input type="button" onclick="parentWrite();" value="向父窗体写入内容"/>
<input type="button" onclick="sayHello();" value="调用父窗体sayHello函数"/>
</body>
</html>
相关阅读:iframe页面跳转的多种方法
3,redirect.html如下:
复制代码 代码示例:
<html>
<head>
<title>子页面C2</title>
<script type="text/javascript">
function parentWrite(){
var content = prompt();
window.parent.document.getElementById("messagebox").innerHTML=content;
}
function sayHello(){
window.parent.sayHello();
}
</script>
</head>
<body>
<h1>我是一个新页面</h1>
<input type="button"
onclick="parentWrite();"
value="向父窗体写入内容"/>
<input type="button" onclick="sayHello();" value="调用父窗体sayHello函数"/>
</body>
</html>