iframe页面怎么控制父窗体 iframe页面跳转

发布时间:2021-01-21编辑:脚本学堂
本文介绍了iframe页面中控制父窗体内容的方法,有关iframe页面跳转的实例教程,有需要的朋友参考下。

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