iframe子页面操作父页面中的元素与方法

原创 2018年04月16日 21:29:58

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

2)在iframe中调用父页面中定义的方法和变量:
parent.method

parent.value

父页面

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

子页面

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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_28444079/article/details/79966904

Iframe父页面与子页面之间的相互调用

Iframe父页面与子页面之间的相互调用。自己的一些理解,请多多指教。
  • liujie19901217
  • liujie19901217
  • 2016-03-21 19:16:54
  • 2390

Jquery 获取 iframe 父页面与子页面的元素和方法

1.在页面中查找 iframe 页面元素: $("#iframe").contents().find("#id") 2.在 iframe 中查找父页面元素: $("#id", parent....
  • a497785609
  • a497785609
  • 2016-05-30 10:09:19
  • 8976

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

1)在iframe中查找父页面元素的方法: $('#id', window.parent.document) 2)在iframe中调用父页面中定义的方法和变量: parent.method pare...
  • tomcat_2014
  • tomcat_2014
  • 2015-11-03 22:25:31
  • 2188

iframe页面中父页面跟子页面方法的相互调用

不废话,直接上代码 父页面代码:     Parent Page                     function parenttest() {              ...
  • qq_30114149
  • qq_30114149
  • 2017-06-09 15:00:30
  • 525

iframe与父页面、子页面的交互

父页面获取子页面父页面获取子页面的window对象: //原生JS获取方式: var frameWin = document.getElementById("ifr").contentWindow...
  • lihefei_coder
  • lihefei_coder
  • 2017-11-26 09:41:09
  • 463

jsp子页面(iframe)获取父页面(在另一个页面中用iframe)元素的方法

1.有一个页面myjsp.jsp 2.父页面包含在myjsp.jsp中: 3.在fatherjsp.jsp中包含子页面如: 4.在sonjsp.jsp获取div的属性方法: parent.f...
  • jinziweiwang
  • jinziweiwang
  • 2017-01-13 16:45:19
  • 2306

通过js或jQuery,<iframe>子父窗口之间元素、方法、window的相互获取

1、js在子窗口获取父窗口的window window.parent //此时可以调用父窗口的window方法,比如获取父窗口的高度window.parent.innerHeight,宽度window...
  • MOONCOM
  • MOONCOM
  • 2016-11-11 17:55:56
  • 13545

iframe子页面与父页面间元素及js变量的访问

1、子页面访问父页面元素  parent.document.getElementById('id')和document相关的方法都可以这样用  2、父页面访问子页面元素  docum...
  • ldw184
  • ldw184
  • 2014-04-09 15:32:04
  • 3822

iframe子页面中获取父页面元素的值

1.获取父页面的一个span的内容var username=$("#user",parent.document).text();2.如果需要获取的元素和当前iframe还隔着好几个iframe可以用v...
  • u014327499
  • u014327499
  • 2017-09-15 09:15:40
  • 628

iframe子页面获取父页面元素的方法

在iframe子页面获取父页面元素    代码如下: $.('#objld', parent.document); 在父页面获取iframe子页面的元素    代码如下: $("#objid"...
  • lhzjj
  • lhzjj
  • 2013-12-10 11:22:12
  • 68857
收藏助手
不良信息举报
您举报文章:iframe子页面操作父页面中的元素与方法
举报原因:
原因补充:

(最多只允许输入30个字)