当前位置:  编程技术>WEB前端
本页文章导读:
    ▪window.opener 的用法      1>window.opener 的用法在一般的用法中,只是用来解决关闭窗口时不提示弹出窗口,  而对它更深层的了解一般比较少。其  实  window.opener是指调用window.open方法的窗口.........
    ▪显示进度条      <html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <style type="text/css"> <!-- #percent { border-top-width:thin; border-right-width:thin; border-bottom-width:thin; .........
    ▪CSS实现DIV层背景颜色渐变      <!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> <meta http-equiv="Conte.........

[1]window.opener 的用法
    来源:    发布时间: 2013-11-06

1>window.opener 的用法

在一般的用法中,只是用来解决关闭窗口时不提示弹出窗口,  而对它更深层的了解一般比较少。其  实  window.opener是指调用window.open方法的窗口。
    在工作中主要是用来解决部分提交的。这种跨页操作对工作是非常有帮助的。
如果你在主窗口打开了一个页面,并且希望主窗口刷新就用这个,打开页面的window.opener就相当于
主窗口的window。
主窗口的刷新你可以用
 window.opener.location.reload();
如果你用虚拟的目录:如struts的*.do会提示你重试

你可以改成这样 window.opener.yourformname.submit()
 就好了

2〉

在应用中有这样一个情况,
在A窗口中打开B窗口,在B窗口中操作完以后关闭B窗口,同时自动刷新A窗口


function closeWin(){
        hasClosed = true;
        window.opener.location="javascript:reloadPage();";
        window.close();
    }
    function window.onbeforeunload(){
        if(!hasClosed){
            window.opener.location="javascript:reloadPage();";
        }
    }

</script>
上面的代码在关闭B窗口的时候会提示错误,说缺少Object,正确的代码如下:
function closeWin(){
        hasClosed = true;
        window.opener.location="javascript:reloadPage();";
        window.opener=null;
        window.close();
    }
    function window.onbeforeunload(){
        if(!hasClosed){//如果已经执行了closeWin方法,则不执行本方法
            window.opener.location="javascript:reloadPage();";
        }
    }

</script>
reloadPage方法如下:
function reloadPage() {
        history.go(0);
        document.execCommand("refresh")
        document.location = document.location;
        document.location.reload();
    }
PS:由于需要支持正常关闭和强制关闭窗口时能捕捉到事件,用了全局变量hasClosed

==============================================

补充,在父窗口是frame的时候在刷新父窗口的时候会出现问题:

The page cannot be refreshed without resending the information.
后修改如下: 
window.opener.parent.document.frames.item('mainFrame').location.href = window.opener.location.href;
不需要执行自带的reload()方法,注意,不要再画蛇添足加上这一句:

window.opener.parent.document.frames.item('mainFrame').location.reload();

========================================================================================
最后,为了同时支持刷新普通父窗口和frame父窗口,代码如下:
function closeWin() {
        hasClosed = true;
    <%if(null != frame){%>
        window.opener.parent.document.frames.item('mainFrame').location.href = window.opener.location.href;
    <%}else{%>
        window.opener.location = "javascript:reloadPage();";
    <%}%>
        //window.opener.top.mainFrame.location="javascript:reloadPage();";
        //self.opener.frames.mainFrame.location.reload(true);
        window.opener = null;
        window.close();
    }
    function window.onbeforeunload(){
        if (!hasClosed) {
        <%if(null != frame){%>
            window.opener.parent.document.frames.item('mainFrame').location.href = window.opener.location.href;
        <%}else{%>
            window.opener.location = "javascript:reloadPage();";
        <%}%>
            window.opener = null;
        }
    }

本文链接


    
[2]显示进度条
    来源:    发布时间: 2013-11-06
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
<!--
#percent
{
border-top-width:thin;
border-right-width:thin;
border-bottom-width:thin;
border-left-width:thin;
border-top-style:solid;
border-right-style:solid;
border-bottom-style:solid;
border-left-style:solid;
height:20px;
width:300px;
vertical-align:middle;
}
#percent #in
{
background-color:#ffddff;
height:20px;
width:0px;
}
#percent #in_font
{
height:20px;
width:300px;
text-align:center;
}
-->
</style>
</head>
<body onload="start();">
<div id="percent">
<div id="in" >10%</div>
</div>
<script type="text/javascript">
i = 0;
function start() {
tm = setInterval("begin()",100);
}
function begin() {
i += 1;
if (i <= 100) {
document.getElementById("in").style.width = i + "%";
document.getElementById("in").innerHTML = i + "%";
}
else {
clearInterval(tm);
document.getElementById("percent").style.display = "none";
document.write("加载成功!");
}
}
</script>
</body>
</html>

 

本文链接


    
[3]CSS实现DIV层背景颜色渐变
    来源: 互联网  发布时间: 2013-11-06
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS实现DIV层背景颜色渐变</title> <style type="text/css">
.change{
 width:100%;
 height:600px;
    FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#b8c4cb,endColorStr=#f6f6f8);    /*IE*/
    background:-moz-linear-gradient(top,#b8c4cb,#f6f6f8);/*火狐*/
    background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#b8c4cb), to(#f6f6f8));/*谷歌*/
 }
</style> </head> <body> <div class="change"></div> </body>
</html>
作者:pjwan 发表于2013-2-4 12:06:16 原文链接
阅读:16 评论:0 查看评论

    
最新技术文章:
▪css white-space:nowrap属性用法(可以强制文字不...
▪IE里button设置border:none属性无效解决方法
▪border:none与border:0使用区别
NOSQL iis7站长之家
▪三个不常见的 HTML5 实用新特性简介
▪css代码优化的12个技巧
▪低版本IE正常运行HTML5+CSS3网站的3种解决方案
▪CSS Hack大全-教你如何区分出IE6-IE10、FireFox、Chr...
▪ie6,ie7,ie8完美支持position:fixed的终极解决方案
▪小技巧处理div内容溢出
▪html小技巧之td,div标签里内容不换行
▪纯CSS实现鼠标放上去改变文字内容
▪li中插入img图片间有空隙的解决方案
▪CSS3中Transition属性详解以及示例分享
▪父div高度不能自适应子div高度的解决方案
▪告别AJAX实现无刷新提交表单
▪从零学CSS系列之文本属性
▪HTML 标签
▪CSS3+Js实现响应式导航条
▪CSS3实例分享之多重背景的实现(Multiple background...
▪用css截取字符的几种方法详解(css排版隐藏溢...
▪页面遮罩层,并且阻止页面body滚动。bootstrap...
▪CSS可以做的几个令你叹为观止的实例分享
▪详细分析css float 属性以及position:absolute 的区...
▪IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解...
▪CSS小例子(只显示下划线的文本框,像文字一...
▪可以给img元素设置背景图
▪不通过JavaScript实现的自动滚动视差效果
▪div+CSS 兼容小摘
▪CSS的inherit与auto使用分析
 


站内导航:


特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

©2012-2021,,E-mail:www_#163.com(请将#改为@)

浙ICP备11055608号-3