javascript页面刷新和跳转

"window.location.href"、"location.href"是本页面跳转 "parent.location.href"是上一层页面跳转 "top.location.href"是最外层的页面跳转 举例说明: 如果A,B,C,D都是jsp,D是C的iframe,C是B的iframe,B是A的iframe,如果D中js这样写 "window.location.href"、"location.href":D页面跳转 "parent.location.href":C页面跳转 "top.location.href":A页面跳转 如果D页面中有form的话, <form>: form提交后D页面跳转 <form target="_blank">: form提交后弹出新页面 <form target="_parent">: form提交后C页面跳转 <form target="_top"> : form提交后A页面跳转 关于页面刷新,D 页面中这样写: "parent.location.reload();": C页面刷新 (当然,也可以使用子窗口的 opener 对象来获得父窗口的对象:window.opener.document.location.reload(); ) "top.location.reload();": A页面刷新 转自:http://hi.baidu.com/pannijingling/blog/item/d57f0ddd651360b3cd11660e.html

关于iframe连接跳转及父与子,子与子之间的调用问题


 
1、网页中如何实现点击iframe中的一个链接,使整个页面(不是只有iframe)跳转到新的页面?

答:在链接里设置target="_parent
如:<a href="2.htm" target="_parent">123</a> 

2、一个iframe引用baidu的页面,整个页面都会被直接转向到baidu的页面,是如何实现的?

在被iframe的页面上写入
<script>
document.body.onload = function(){
   if(top != self)top.location = self.location;
}
</script> 

3、怎么在父窗体form提交后在iframe显示页面?
<input type="radio" name="radiobutton" value="manuscript" οnclick="javascript:this.form.action='a.php';this.form.target='iframe的name或ID';this.form.submit()"> 

4、A网页链接到B网页内iframe框架中的1_1.htm文件,怎么做?
<a href='1_1.htm' target="框架名">adsf</a>
 
父子页面之间的调用关系
父:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>显示图表</title>
<script src="http://www.ablanxue.com/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
    var gg="dsafdsafdsafdsafsdaf";
    function ggMM() {
        alert("2222222222222222222222222222222");
    }
    function callIframeMethod() {
        //document.getElementById("ii").contentWindow.test();
        $("#ii")[0].contentWindow.test(); //用jquery调用需要加一个[0]
    }
    function callIframeField() {
        alert($("#ii")[0].contentWindow.ff);
    }
    function callIframeHtml() {
        alert($("#ii")[0].contentWindow.$("#dd").val());
        //alert($("#ii")[0].contentWindow.document.getElementById("dd").value);
        //alert($("#ii")[0].contentWindow.document.getElementById("dd").value);             
    }   
    function giveParameter() {
        $("#ii")[0].contentWindow.hellobaby="dsafdsafsdafsdafsdafsdafsadfsadfsdafsadfdsaffdsaaaaaaaaaaaaa";
    }
</script>
</head>
<body>
    <a href="#" onClick="giveParameter();">参数传递</a>
    <a href="#" onClick="callIframeMethod();">调用子iframe方法</a>
    <a href="#" onClick="callIframeField();">调用子iframe变量</a>
    <a href="#" onClick="callIframeHtml();">调用子iframe组件</a></br>  
    <iframe id="ii" src="iframe.html" width="100%" frameborder="0"></iframe>
    <iframe id="new" src="newIframe.html" width="100%" frameborder="0"></iframe>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>显示图表</title>
<script src="http://www.ablanxue.com/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function callLevelFrame() {
    var ff=parent.$("#ii")[0].contentWindow.ff;
    alert(ff);
}
</script>
</head>
<body>
<a href="#" onClick="callLevelFrame();">调用兄弟iframe</a>   
<input id="nn" type="text" value="sdafsdfsa"/>
</body>
</html>

 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>显示图表</title>
<script src="http://www.ablanxue.com/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
var ff="adfdasfdsafdsafdsaf";
function test() {
    alert($("#dd").val());
}
function callMainField() {
    alert(parent.gg);
}
function callMainMethod() {
    parent.ggMM();
}
function callMainHtml() {
    alert(parent.$("#ii").attr("id"));
}
function getParameter() {
    alert(window.hellobaby);
}
</script>
</head>
<body>
    <a href="#" onClick="getParameter();">接受参数</a>
    <a href="#" onClick="callMainMethod();">调用子iframe方法</a>
    <a href="#" onClick="callMainField();">调用主窗口变量</a>
    <a href="#" onClick="callMainHtml();">调用子iframe组件</a>   
    <input id="dd" type="text" value="http://www.ablanxue.com123456"/>
</body>
</html>


JS iframe父子页面元素调用方法 | window parent top opener 解释

翻开那一页 发布于 3年前,共有 0 条评论

iframe

父窗口调用子窗口

var hasMore = parent.document.getElementByIdx_x_x_x("hasMore").value;

子窗口调用父窗口
document.frames["ifrmBoxFrame"].me.preLoadBoxGrid();
window.frames["iframe_ID"].document.getElementByIdx_x_x_x("iframe_document_object"-).object_attribute = attribute_value;


window
是对当前窗口自身的引用
如:


window.returnValue = ret;
window.close();

top
返回顶层窗口,即浏览器窗口。
如:


top.frames[tabID].location = url;
top.document.frames("ifrmBoxFrame").me.executeQueryCond();

parent
返回父窗口
如:


parent.$("Insheet_FrameTable").src = "";
parent.frames["Insheet_FrameSheetList"].initInsheetList(false);

opener

opener用于在window.open的页面引用执行该window.open方法的的页面的对象。例如:A页面通过window.open()方法弹出了B页面,在B页面中就可以通过opener来引用A页面,这样就可以通过这个对象来对A页面进行操作。 

如:


var url="editarable.htm?arableID=" + curArableID+"&isDeleteDisabled="+$("Btn_delArable").disabled;
window.open(url, "viewArable", "height=" + h + ",width=" + w + ",left=" + x + ",top=" +y + ",status=no,toolbar=no,menubar=no,location=no");
//第二个页面中 使用opener
if(!(window.opener==null || window.opener.closed)){
window.opener.me.queryArable();
}
window.close();

首先来说说 parent.window与top.window的用法 
"window.location.href"、"location.href"是本页面跳转 
"parent.location.href"是上一层页面跳转 
"top.location.href"是最外层的页面跳转 
举例说明: 
如果A,B,C,D都是jsp,D是C的iframe,C是B的iframe,B是A的iframe,如果D中js这样写 
"window.location.href"、"location.href":D页面跳转 
"parent.location.href":C页面跳转 
"top.location.href":A页面跳转 

parent.frames("frmEletroDocAttachInsert").frames("fraEletroDocAttachView").document.location = "about:blank";

top.document.frames('ifrmMainFrame').location.reload();


有两个窗口: A窗口(父),B窗口(模态)

A窗口里有一个DATAGRID,一个按钮。

点击按钮时,弹出B窗口(模态)。在B窗口中添加数据,提交后,要求B窗口自关闭,然后刷新A窗口(父)
代码如下:

<script type="text/javascript">
function openSubWin()
{
window.showModalDialog('b.html', 'newwindow', 'height=500, width=400, top=0, left=0, toolbar=no, menubar=yes, scrollbars=yes,resizable=yes,location=no, status=no');
window.location.reload();
}
</script>

弹出子窗体b.html , 当关闭子窗体时 触发父页面刷新

最近做物资系统的时候,又涉及到模态窗口的问题了,上次做的时候没遇到这次这么多东西,记下来吧
父窗口 js方法
代码如下:

function openwin(id){
var answer=window.showModalDialog("demand.do?method=queryBOM&mdid="+id+"&d="+escape(new Date()),window.self,"dialogWidth:700px;dialogHeight:620px:center:yes");
if(answer==1){
window.location.href = "demand.do?method=selmd&d="+escape(new Date()); //转到处理页面
//window.location.reload(); 刷新父窗口
//winow.location.reload(true);

}
}

加个escape(new Date()) 避免读取缓存,当然也可以在子窗口中,加入
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
子窗口 js 方法:
代码如下:

function reVal(){
window.returnValue=1; //父窗口中 answer的值
window.close();
}

打开模态窗口之后,父窗口会一直等待子窗口返回个值,如果是表单提交或是button就执行reVal()方法
返回answer的值,window.returnValue=1 这个地方我测试了 好像只能返回String类型的,数组类型的不好使

在子窗口中使用 window.opener.location.reload(); 不好使,不试用于模态窗口,window.opern() 好使

还有个问题是:在模态窗口里form 提交会弹出新窗口,这个问题简单就在<head>里面加个<base target="_self">
就可以搞定,注:我刚开始是不想通过form提交的,用js window.location.href 跳转到不同的action去处理,发现
<base target="_self"> 就不起作用了,似乎 <base target="_self"> 只是针对form action="" 才起作用,这个地方应该可以用iframe 去实现。

用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)
2014-09-14 12:51 | 11099人阅读 | 来源
Onunload,onbeforeunload都是在刷新或关闭时调用,可以在<script>脚本中通过window.onunload来指定或者在<body>里指定。区别在于onbeforeunload在onunload之前执行,它还可以阻止onunload的执行。
  Onbeforeunload也是在页面刷新或关闭时调用,Onbeforeunload是正要去服务器读取新的页面时调用,此时还没开始读取;而onunload则已经从服务器上读到了需要加载的新的页面,在即将替换掉当前页面时调用。Onunload是无法阻止页面的更新和关闭的。而 Onbeforeunload 可以做到。

页面加载时只执行onload
页面关闭时先执行onbeforeunload,最后onunload
页面刷新时先执行onbeforeunload,然后onunload,最后onload。

1、onbeforeunload事件:
  说明:目前三大主流浏览器中firefox和IE都支持onbeforeunload事件,opera尚未支持。
  用法:
   ・object.onbeforeunload = handler
   ・<element onbeforeunload = “handler” … ></element>
  描述:
   事件触发的时候弹出一个有确定和取消的对话框,确定则离开页面,取消则继续待在本页。handler可以设一个返回值作为该对话框的显示文本。

  触发于:
   ・关闭浏览器窗口
   ・通过地址栏或收藏夹前往其他页面的时候
   ・点击返回,前进,刷新,主页其中一个的时候
   ・点击 一个前往其他页面的url连接的时候
   ・调用以下任意一个事件的时候:click,document write,document open,document close,window close ,window navigate ,window NavigateAndFind,location replace,location reload,form submit.
   ・当用window open打开一个页面,并把本页的window的名字传给要打开的页面的时候。
   ・重新赋予location.href的值的时候。
   ・通过input type=”submit”按钮提交一个具有指定action的表单的时候。
  可以用在以下元素:
   ・BODY, FRAMESET, window
  平台支持:
   IE4+/Win, Mozilla 1.7a+, Netscape 7.2+, Firefox0.9+
  示例:
代码如下:

   <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
   <title>onbeforeunload测试</title>
   <script>
   function checkLeave(){
    event.returnValue="确定离开当前页面吗?";
   }
   </script>
   </head>
   <body οnbefοreunlοad="checkLeave()">
   </body>
   </html>

2、onunload事件
  用法:
   ・object.onbeforeunload = handler
   ・<element onbeforeunload = "handler"></element>

  描述:
   当用户关闭一个页面时触发 onunload 事件。

  触发于:
   ・关闭浏览器窗口
   ・通过地址栏或收藏夹前往其他页面的时候
   ・点击返回,前进,刷新,主页其中一个的时候
   ・点击 一个前往其他页面的url连接的时候
   ・调用以下任意一个事件的时候:click,document write,document open,document close,window close ,window navigate ,window NavigateAndFind,location replace,location reload,form submit.
   ・当用window open打开一个页面,并把本页的window的名字传给要打开的页面的时候。
   ・重新赋予location.href的值的时候。
   ・通过input type=”submit”按钮提交一个具有指定action的表单的时候。
  示例:
代码如下:

   <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
   <title>onunload测试</title>
   <script>
   function checkLeave(){
    alert("欢迎下次再来!");
   }
   </script>
   </head>
   <body οnunlοad="checkLeave()">
   </body>
   </html>

一个判断页面是否真的关闭和刷新的好方法:
代码如下:

window.οnbefοreunlοad=function (){
alert("===οnbefοreunlοad===");
if(event.clientX>document.body.clientWidth && event.clientY < 0 || event.altKey){
alert("你关闭了浏览器");
}else{
alert("你正在刷新页面");
}
}

这段代码就是判断触发onbeforeunload事件时,鼠标是否点击了关闭按钮,或者按了ALT+F4来关闭网页,如果是,则认为系统是关闭网页,否则在认为系统是刷新网页。


如何实现刷新当前页面呢?借助js你将无所不能。
1,reload 方法,该方法强迫浏览器刷新当前页面。
语法:location.reload([bForceGet])  
参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取当前页。true, 则以 GET 方式,从服务端取最新的页面, 相当于客户端点击 F5("刷新")
2,replace 方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,你不能通过“前进”和“后退”来访问已经被替换的URL。
语法: location.replace(URL)  
通常使用: location.reload() 或者是 history.go(0) 来做。
此方法类似客户端点F5刷新页面,所以页面method="post"时,会出现"网页过期"的提示。
因为Session的安全保护机制。
当调用 location.reload() 方法时, aspx页面此时在服务端内存里已经存在, 因此必定是 IsPostback 的。
如果有这种应用: 需要重新加载该页面,也就是说期望页面能够在服务端重新被创建,期望是 Not IsPostback 的。
这里,location.replace() 就可以完成此任务。被replace的页面每次都在服务端重新生成。
代码: location.replace(location.href);

返回并刷新页面:
location.replace(document.referrer);
document.referrer //前一个页面的URL
不要用 history.go(-1),或 history.back();来返回并刷新页面,这两种方法不会刷新页面。
附:
Javascript刷新页面的几种方法:
代码如下:

1,history.go(0)
2,location.reload()
3,location=location
4,location.assign(location)
5,document.execCommand('Refresh')
6,window.navigate(location)
7,location.replace(location)
8,document.URL=location.href
自动刷新页面的方法:
1,页面自动刷新:把如下代码加入<head>区域中
代码如下:

<meta http-equiv="refresh" content="20">
其中20指每隔20秒刷新一次页面.
2,页面自动跳转:把如下代码加入<head>区域中
代码如下:

<meta http-equiv="refresh" content="20;url=http://www.jb51.net">
其中20指隔20秒后跳转到http://www.jb51.net页面
3,页面自动刷新js版
代码如下:

<script language="JavaScript">
function myrefresh()
{
   window.location.reload();
}
setTimeout('myrefresh()',1000); //指定1秒刷新一次
</script>
4,JS刷新框架的脚本语句
代码如下:

//刷新包含该框架的页面用  
<script language=JavaScript>
   parent.location.reload();
</script>
//子窗口刷新父窗口
<script language=JavaScript>
    self.opener.location.reload();
</script>
( 或 <a href="javascript:opener.location.reload()">刷新</a>   )
//刷新另一个框架的页面用  
<script language=JavaScript>
   parent.另一FrameID.location.reload();
</script>
如果想关闭窗口时刷新或想开窗时刷新,在<body>中调用以下语句即可。
代码如下:

<body οnlοad="opener.location.reload()"> 开窗时刷新
<body onUnload="opener.location.reload()"> 关闭时刷新
<script language="javascript">
window.opener.document.location.reload()
</script>


一、先来看一个简单的例子:

下面以三个页面分别命名为frame.html、top.html、bottom.html为例来具体说明如何做。
frame.html 由上(top.html)下(bottom.html)两个页面组成,代码如下:
代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> frame </TITLE>
</HEAD>
<frameset rows="50%,50%">
<frame name=top src="top.html">
<frame name=bottom src="bottom.html">
</frameset>
</HTML>

现在假设top.html (即上面的页面) 有七个button来实现对bottom.html (即下面的页面) 的刷新,可以用以下七种语句,哪个好用自己看着办了。
top.html 页面的代码如下:
代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> top.html </TITLE>
</HEAD>
<BODY>
<input type=button value="刷新1" οnclick="window.parent.frames[1].location.reload()"><br>
<input type=button value="刷新2" οnclick="window.parent.frames.bottom.location.reload()"><br>
<input type=button value="刷新3" οnclick="window.parent.frames['bottom'].location.reload()"><br>
<input type=button value="刷新4" οnclick="window.parent.frames.item(1).location.reload()"><br>
<input type=button value="刷新5" οnclick="window.parent.frames.item('bottom').location.reload()"><br>
<input type=button value="刷新6" οnclick="window.parent.bottom.location.reload()"><br>
<input type=button value="刷新7" οnclick="window.parent['bottom'].location.reload()"><br>
</BODY>
</HTML>

下面是bottom.html页面源代码,为了证明下方页面的确被刷新了,在装载完页面弹出一个对话框。
代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> bottom.html </TITLE>
</HEAD>
<BODY οnlοad="alert('我被加载了!')">
<h1>This is the content in bottom.html.</h1>
</BODY>
</HTML>

解释一下:
代码如下:

1.window指代的是当前页面,例如对于此例它指的是top.html页面。
2.parent指的是当前页面的父页面,也就是包含它的框架页面。例如对于此例它指的是framedemo.html。
3.frames是window对象,是一个数组。代表着该框架内所有子页面。
4.item是方法。返回数组里面的元素。
5.如果子页面也是个框架页面,里面还是其它的子页面,那么上面的有些方法可能不行。
附:
Javascript刷新页面的几种方法:
1 history.go(0)
2 location.reload()
3 location=location
4 location.assign(location)
5 document.execCommand('Refresh')
6 window.navigate(location)
7 location.replace(location)
8 document.URL=location.href

二、自动刷新页面
1.页面自动刷新:把如下代码加入<head>区域中
<meta http-equiv="refresh" content="20">
其中20指每隔20秒刷新一次页面.
2.页面自动跳转:把如下代码加入<head>区域中
<meta http-equiv="refresh" content="20;url=http://www.jb51.net">
其中20指隔20秒后跳转到http://www.jb51.net页面
3.页面自动刷新js版
<script language="JavaScript"> function myrefresh() { window.location.reload(); } setTimeout('myrefresh()',1000); //指定1秒刷新一次 </script>
[Ctrl+A 全选 注: 如需引入外部Js需刷新才能执行]

三、java在写Servler,Action等程序时,要操作返回页面的话(如谈出了窗口,操作完成以后,关闭当前页面,刷新父页面)
代码如下:

1 PrintWriter out = response.getWriter();
2 out.write("<script type=\"text/javascript\">");
3 子窗口刷新父窗口
4 out.write("self.opener.location.reload();");
5 //关闭窗口
6 out.write("window.opener=null;");
7 out.write("window.close();");
8 out.write("</script>");

四、JS刷新框架的脚本语句
1.如何刷新包含该框架的页面用
代码如下:

<script language=JavaScript>
parent.location.reload();
</script>

2.子窗口刷新父窗口
代码如下:

<script language=JavaScript>
self.opener.location.reload();
</script>

3.如何刷新另一个框架的页面用 (上面的实例以说明了)
代码如下:

语句1. window.parent.frames[1].location.reload();
语句2. window.parent.frames.bottom.location.reload();
语句3. window.parent.frames["bottom"].location.reload();
语句4. window.parent.frames.item(1).location.reload();
语句5. window.parent.frames.item('bottom').location.reload();
语句6. window.parent.bottom.location.reload();
语句7. window.parent['bottom'].location.reload();

4.如果想关闭窗口时刷新或者想开窗时刷新的话,在<body>中调用以下语句即可。
<body οnlοad="opener.location.reload()">
开窗时刷新
<body onUnload="opener.location.reload()">
关闭时刷新
代码如下:

<script language="javascript">
window.opener.document.location.reload()
</script>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值