iframe子页面操作父页面

最新推荐文章于 2024-04-28 19:21:12 发布

原创最新推荐文章于 2024-04-28 19:21:12 发布 · 2.2w 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#iframe #stylesheet #class #jquery #xhtml

javascript 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了如何在子页面中操作父页面的元素及方法，包括获取父页面的参数、调用父页面的方法、使用jQuery获取父页面div的文本值及iframe的src属性等。

最近经常用到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先这样吧。

http://shop102692297.taobao.com/shop/view_shop.htm