您的位置：首页 > 其它

iframe子页面操作父页面

2012-02-22 22:32 99 查看

最近经常用到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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航