JQueryiframe页面操作父页面中的元素与方法(实例讲解)-白红宇的个人博客

发布日期：2021-05-07 04:24:27 浏览次数：23 分类：原创文章

本文共 1925 字，大约阅读时间需要 6 分钟。

本文来自—->脚本之家：

这篇文章主要是对JQueryiframe页面操作父页面中的元素与方法进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助
1）在iframe中查找父页面元素的方法：
$(‘#id’, window.parent.document)
2）在iframe中调用父页面中定义的方法和变量：
parent.method
parent.value

3）实例

<%@ 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>

上一篇：Java后台如何弹出window的下载对话框

下一篇：jquery sortable实现table拖拽排序，更新时只更新受影响的行

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

发表评论

最新留言

关于作者

推荐文章