在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>