天天看點

html中iframe調用父頁面方法和變量

這篇文章主要是對JQueryiframe頁面操作父頁面中的元素與方法進行了詳細的分析介紹,需要的朋友可以過來參考下,希望對大家有所幫助

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>

繼續閱讀