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先这样吧。