弹出窗口根据内容自动调整大小的JS解决方案

来源:互联网 发布:2016淘宝双十一记录 编辑:程序博客网 时间:2024/04/30 15:22

父类(主/打开)窗口中代码为:

 

 

 

<html>
<head><title>父类窗口</title>
<script type="text/javascript">
var s,oRes;
 
function openwin(url)
 
{
     s
=window.open("child.htm");    
    oRes
=s.document.getElementById("txt");
    
//文本改变时还回
    //oRes.onchange=function(){
    //alert("text changed");
    //document.getElementById("txtRet").value=oRes.value;}
    //子窗口关闭时还回,另一种方法传参数
    //var btnChild=s.document.getElementById("btnSubmit");
    //btnChild.onclick=function(){
    //alert("btn clicked");
    //document.getElementById("txtRet").value=oRes.value;}
 }

 
function childclose(txt)
{
    document.getElementById(
"txtRet").value=txt;
}

</script>
<body>
<form>
<input type="text" id="txtRet" name="txtRet" />
<input type="button" value="按钮" onclick="openwin('child.htm')" />
</form>
</body>
</html>

 

在之类弹出窗口加入resizeto(window.clientWidth,window,clientHeight)代码:

 

 

<!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>
    
<title>子类窗口</title>
    
<script type="text/javascript">
    window.open
=function() {
        
if(window.opener)
            
{
           width
=document.body.clientWidth+33;
           height
=document.body.clientHeight+50;
           window.resizeTo(width,height);
       }

    }
    
    
</script>
</head>
<body style="margin:0px;" onload="win_onLoad()">
<input type="text" id="txt" name="txt" />
<input type="button" id="btnSubmit" name="btnSubmit" value="确定" />
<script type="text/javascript">
btnSubmit.onclick
=function(){
        
if(window.opener)
        
{
            window.opener.childclose(document.getElementById(
"txt").value);
            window.setTimeout(
function(){self.close();},500);
        }

        
else
        
{
            self.close();
        }

    }

</script>
</body>
</html>

 

 referrence:http://topic.csdn.net/t/20040623/09/3114967.html

原创粉丝点击