iframe子页面操作父页面

2019独角兽企业重金招聘Python工程师标准>>>

最近经常用到iframe，用的最多的就是在子页面中操作父页面的方法或变量等，总结了用到的几种方法，如下：

                       var tableName = window.parent.frames["mainFrame"].tName;//获取父页面的参数值
                        window.parent.frames["mainFrame"].getPageInfo();//父页面的方法
                        var divValue = window.parent.$("#test").text(); (jQuery); //获取父页面div的文本值
                        var htmlUrl = window.parent.$("#main_frame").attr("src");(jQuery)//获取父页面的iframe的src属性值

其实获取父页面的一个参数或方法有很多种的写法，现在拿获取父页面的iframe的src属性值为例，现在先看主页面的html代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="index.aspx.cs" Inherits="index" %>
< !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>
< link href="css/baseStyle.css" rel="stylesheet" type="text/css" />
< link rel="stylesheet" type="text/css" href="css/layout-default-latest.css"/>
< link href="css/main.css" rel="stylesheet" type="text/css" />
< link href="css/jquery.treeview.css" rel="stylesheet" type="text/css"/>
< script type="text/javascript" src="js/jquery-1.4.4.js"></script>
< script type="text/javascript" src="js/jquery.treeview.js"></script>
< script type="text/javascript" src="js/jquery.layout.js"></script>
< script src="tuodongdiv/easydrag.js" type="text/javascript"></script>
< script src="tuodongdiv/comm_window.js" type="text/javascript"></script>
< style type="text/css">
body {
font-size: 14px;
font-family: 微软雅黑;
}
#header
{
width:100%;
border: #5e96d3 solid 1px;
padding:0px;
margin:0px;
background-image:url(css/images/header_bg.gif);
}
.ui-layout-west{
padding: 0px;
overflow: hidden;
border: #5e96d3 solid 1px;
}
.ui-layout-north
{
    padding-top:2px;
padding: auto 20px;
overflow: hidden;
/*background: #e6e6e6 url(css/images/header_bg.gif) 0 50% repeat-x;*/
}
.ui-layout-south
{
   /* padding:auto 20px;
    overflow: hidden;*/
    background: #e6e6e6 url(css/images/footer_bg.gif) 0 50% repeat-x;
}
#header a
{
float:right;
margin-top:20px;
margin-right:35px;

    }
     .ui-layout-center
{
     /*padding:10px; */  
}
< /style>
< script type="text/javascript">
    $(document).ready(function () {
        //树形菜单
                $("#browser").treeview();
                $("body").layout({
                    north: {
                        size: 60,
                        resizable: false
                    },
                    west: {
                },
                south: {
                    size: 20,
                    resizable: false
                }
            });
    });
< /script>
< /head>
< body>
< !-- 页面标题 -->
<div id="header" class="ui-layout-north"><img src="css/images/logo.png" alt="logo" style="float:left"/>
<a href="index.aspx">主页</a>
< /div>
< !-- 菜单栏 -->
<div class="ui-layout-west">
<ul id="browser" class="filetree">
<li><span class="folder">日志管理</span>
<ul>
<li><span class="file"><a href="LogInfo.aspx" target="mainFrame">日志查看</a></span></li>
</ul>
</li>
<li><span class="folder">菜单一</span>
<ul>
<li><span class="folder">二级菜单</span>
<ul id="folder21">
<li><span class="file"><a href="LogInfoCopy.aspx" target="mainFrame">日志查看副本</a></span></li>
<li><span class="file"><a href="tuodongdiv/HTMLPage2.htm" target="mainFrame">测试弹出层</a></span></li>
</ul>
</li>
<li><span class="file">二级菜单</span></li>
</ul>
</li>
<li class="closed"><span class="folder">菜单二</span>
<ul>
<li><span class="file">二级菜单</span></li>
</ul>
</li>
<li><span class="file">菜单三</span></li>
</ul>
< /div>
< !-- 内容区 -->
<iframe id="main_frame" name="mainFrame" class="ui-layout-center" width="100%"
height="100%" frameborder="0" scrolling="auto" src="MainFrame.aspx"></iframe>

< div class="ui-layout-south">
< /div>
< /body>
< /html>

要获取iframe的src的值的话，可以在子页面MainFrame.aspx中用这几种方法获取：

             var htmlUrl = window.parent.$("#main_frame").attr("src"); (jQuery)//获取父页面的iframe的src属性值
             var htmlUrl = window.parent.$("#main_frame").attr("src");(jQuery)
             var htmlUrl = window.parent.$("iframe[name='mainFrame']").attr("src");(jQuery)
             var htmlUrl = window.parent.document.getElementById("main_frame").src;
             var htmlUrl = window.parent.frames["mainFrame"].location;
             var htmlUrl = window.parent.$("[name='mainFrame']").attr("src");

这是自己用到的，应该还会有很多的方法，ok先这样吧。

转载于:https://my.oschina.net/tianyuyangliu/blog/115427