JQueryiframe页面操作父页面中的元素与方法(实例讲解)

最新推荐文章于 2021-06-08 11:32:00 发布

beautifulsarah

最新推荐文章于 2021-06-08 11:32:00 发布

阅读量703

点赞数

分类专栏： JQUERY IFRAME

本文链接：https://blog.csdn.net/beautifulsarah/article/details/54947280

版权

JQUERY 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

IFRAME

2 篇文章 0 订阅

订阅专栏

1）在iframe中查找父页面元素的方法：$('#id', window.parent.document)

2）在iframe中调用父页面中定义的方法和变量：parent.methodparent.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"><htmlxmlns="http://www.w3.org/1999/xhtml" ><headrunat="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> <divid="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"><htmlxmlns="http://www.w3.org/1999/xhtml" ><headrunat="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"> <divid="iframe"> IFrame.aspx </div> </form></body></html>