首页 > Web开发 > 详细

JQuery iframe页面通过parent方法操作父页面中的元素与方法(实例讲解)

时间:2016-04-25 15:14:46      阅读:262      评论:0      收藏:0      [点我收藏+]

JQuery iframe页面通过parent方法操作父页面中的元素与方法(实例讲解)


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>


JQuery iframe页面通过parent方法操作父页面中的元素与方法(实例讲解)

原文:http://iicoo.blog.51cto.com/10739372/1767431

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!