1)在iframe中查找父页面元素的方法:
$('#id', window.parent.document)
2)在iframe中调用父页面中定义的方法和变量:
parent.method
parent.value
3)实例
1.父页面
- <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="IframeDemo._Default" %>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" >
- <head runat="server">
- <title></title>
- <script language="javascript" type="text/javascript" src="jquery-1.5.1.min.js"></script>
- <script language="javascript" type="text/javascript">
- var hello = 'hello';
- function getHelloWorld() {
- alert('hello world');
- }
- </script>
- </head>
- <body>
- <form id="form1" runat="server">
- <div>
- <div id="default" style=" width:200px; height:400px; float:left;">default.aspx</div>
- <iframe id="iframeid" src="IFrame.aspx" style=" width:400px; height:400px; float:left;"></iframe>
- </div>
- </form>
- </body>
- </html>
2.子页面
- <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="IFrame.aspx.cs" Inherits="IframeDemo.IFrame" %>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" >
- <head runat="server">
- <title></title>
- <script language="javascript" type="text/javascript" src="jquery-1.5.1.min.js"></script>
- <script language="javascript" type="text/javascript">
- $(function() {
- //在iframe中查找父页面元素
- alert($('#default', window.parent.document).html());
- //在iframe中调用父页面中定义的方法
- parent.getHelloWorld();
- //在iframe中调用父页面中定义的变量
- alert(parent.hello);
- });
- </script>
- </head>
- <body>
- <form id="form1" runat="server">
- <div id="iframe">
- IFrame.aspx
- </div>
- </form>
- </body>
- </html>