让页面弹出另一个页面的通用方法

最新推荐文章于 2019-08-27 10:15:43 发布
原创最新推荐文章于 2019-08-27 10:15:43 发布 · 556 阅读
0 ·
CC 4.0 BY-SA版权
文章标签：
#嵌入式
Function Code 专栏收录该内容
10 篇文章
订阅专栏
本文介绍了一种使用JavaScript动态创建可移动DIV的方法。通过监听鼠标事件实现DIV元素的拖拽移动，并提供了完整的代码示例。此外，还展示了如何自适应调整IFrame的高度。
//    动态创建可移动div
     
     var vIndex =9999;
     
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    var move_obj_x0=0,move_obj_y0=0,move_obj_x1=0,move_obj_y1=0;    //(x0,y0)为开始拖动时鼠标的位置(x1,y1)为开始拖动时对象的位置 
    var obj_moveable=false;                                         //定义DIV是否可移动的标志
    var returnValue =null;
    
//    开始拖动; 
    function startMove(obj) 
    {
        if(event.button==1) 
        { 
            obj.setCapture();
            move_obj_x0 = event.clientX; 
            move_obj_y0 = event.clientY; 
            move_obj_x1 = parseInt(obj.style.left); 
            move_obj_y1 = parseInt(obj.style.top); 
            obj_moveable = true;
        } 
    }
    
//    拖动; 
    function Moving(obj) 
    { 
        if(obj_moveable) 
        {
            obj.style.left = (move_obj_x1 + event.clientX - move_obj_x0>0)?move_obj_x1 + event.clientX - move_obj_x0:0; 
            obj.style.top = (move_obj_y1 + event.clientY - move_obj_y0>0)?move_obj_y1 + event.clientY - move_obj_y0:0; 
        } 
    }
    
//    停止拖动; 
    function stopMove(obj) 
    { 
        if(obj_moveable) 
        { 
            obj.releaseCapture(); 
            obj_moveable = false;
            move_obj_x1 = parseInt(obj.style.left); 
            move_obj_y1 = parseInt(obj.style.top);
        }
    }
    
//    动态创建div
//    title 标题
//    ico 显示的图标，可为null
//    url div里嵌入的iframe地址
//    w宽度
//    h高度
//    havMask 是否有屏蔽膜（0:无）
    function CreateDivFrm(title,ico,url,w,h,havMask)
    {
        if(havMask !=0)
        {
            PopMaskLayer();
        }
        
        vIndex =vIndex +2;
        
        var htmlStr,divCount;

        var divObj=document.createElement("div");
        var countObj=document.getElementById("countObj") ;
  	    var formObj=document.forms[0];
  	    
        if(ico==null)
        {
          ico="../images/ico/folderopen.gif";
        }
        
        if( formObj == null)    
	    {	 
	       alert("◎参数错误！（没有指定的表单form）");
	       return;
        }
      
  	    if( countObj == null)  
  	    {
		    var countObj=document.createElement("input");
	        countObj.type="hidden";
	        countObj.id="countObj";
	        countObj.value=1;
	        formObj.appendChild(countObj);
	        divCount = 1
	    }    
	    else
	    {   
	         divCount=parseInt(countObj.value) + 1 ;
	         countObj.value=divCount;
	    } 
	    
        w =typeof w!="undefined" ?w:( w !=null ? w : 406);      //容器中内容部分的实际高度
        h =h< 50 ?50 : (h +50);                                 //其中50表示页面中的操作区域
        h =typeof h!="undefined" ?h:( h !=null ? h : 150);      
        w1 =w+2;                                                //主容器（外围DIV）的宽度                                            
        w2=w1 - 10; //容器顶部DIV自适应宽度
        h=h + 15;
        
        var urlStr = new String();
        urlStr =url;
 
        if(urlStr.indexOf("?")>=0)
        {
           urlStr = urlStr + "&divFrmID=divfrm" + divCount ; 
        }
        else
        {
            urlStr = urlStr + "?divFrmID=divfrm" + divCount ; 
        }
        
        htmlStr = "<div id='divfrm" + divCount + "' style='POSITION: absolute;width:" + w1 + "px;z-index:" + vIndex + ";' onmousedown=startMove(this) onmouseup =stopMove(this) onmousemove=Moving(this) >";
//        htmlStr = htmlStr + "<div style='width:100%;'>";
//        htmlStr = htmlStr + "   <div class='fLeft dialogLeft'></div>";
//        htmlStr = htmlStr + "   <div id='dMiddle" + divCount + "' class='fLeft dialogMiddle' style='width:" + w2 + "px'>";
//        htmlStr = htmlStr + "       <div class='fLeft tPaddingLeft'>";
//        htmlStr = htmlStr + "           <img src='" + ico + "' style='vertical-align:middle;' alt='双击这关闭此窗口' ondblclick=delDivFrm('divfrm" + divCount + "') />&nbsp;<font color='white'>" + title + "</font>";
//        htmlStr = htmlStr + "       </div>";
//        htmlStr = htmlStr + "       <div class='fRig tPaddingRight'>"
//        htmlStr = htmlStr + "           <img src='../images/ico/close1.gif'  alt='' id='imgbbsdiv' onclick=delDivFrm('divfrm" + divCount + "') />"
//        htmlStr = htmlStr + "       </div>"
//        htmlStr = htmlStr + "   </div>";
//        htmlStr = htmlStr + "   <div class='fLeft dialogRight'></div>";
//        htmlStr = htmlStr + "</div>";
//        htmlStr = htmlStr + "<div style='width:100%;'>";
//        htmlStr = htmlStr + "   <div id='dMain" + divCount + "' class='dialogMain' style='width:" + w + "px;height:1px;'>";
//        htmlStr = htmlStr + "       <iframe id='frm" + divCount + "' name='frm" + divCount + "' src='" + urlStr + "' scrolling='no' frameborder='0' style='width:100%;height:" + h + ";' onload='AutoOnloadIframe(" + divCount + ");'></iframe>";
//        htmlStr = htmlStr + "   </div>";
//        htmlStr = htmlStr + "</div>";
   htmlStr = htmlStr + "<table cellpadding='0' cellspacing='0' width='" + w1 + "' >";
   htmlStr = htmlStr + "     <tr>";
   htmlStr = htmlStr + "         <td width='5'  id='dMiddle" + divCount + "'><img style='display:block;' src='top_left.gif'/></td>";
   htmlStr = htmlStr + "         <td style='background-image:url(../images/dialognew/top.gif);'>";
   htmlStr = htmlStr + "         <table width='" + w2 + "' cellpadding='0' cellspacing='0'>";
   htmlStr = htmlStr + "             <tr>";
   htmlStr = htmlStr + "                 <td valign='middle' style='color:White;font-size:14px;font-weight:bold;'>&nbsp;<img src='folder.gif' style='vertical-align:middle;' alt='双击这关闭此窗口' ondblclick=delDivFrm('divfrm" + divCount + "') />&nbsp;" + title + "</td>";
   htmlStr = htmlStr + "                 <td align='right'><img src='close.gif' onclick=delDivFrm('divfrm" + divCount + "') />&nbsp;</td>";
   htmlStr = htmlStr + "             </tr>";
   htmlStr = htmlStr + "         </table>";
   htmlStr = htmlStr + "         </td>";
   htmlStr = htmlStr + "         <td width='5'><img style='display:block;' src='top_right.gif'/></td>";
   htmlStr = htmlStr + "     </tr>";
   htmlStr = htmlStr + " </table>";
   htmlStr = htmlStr + " <table cellpadding='0' cellspacing='0' width='" + w1 + "'>";
   htmlStr = htmlStr + "     <tr>";
   htmlStr = htmlStr + "         <td style='background-image:url(../images/dialognew/left.gif);' width='5'></td>";
   htmlStr = htmlStr + "         <td style='background-color:white;' width='" + w2 + "' >";
   htmlStr = htmlStr + "             <table cellpadding='0' cellspacing='0' width='" + w2 + "'>";
   htmlStr = htmlStr + "                 <tr>";
   htmlStr = htmlStr + "                     <td style='padding:0px;overflow:auto; '   id='dMain" + divCount + "'>";
   htmlStr = htmlStr + "                        <iframe id='frm" + divCount + "' name='frm" + divCount + "' scrolling='yes' src='" + urlStr + "' width='" + w2 + "'  frameborder='0' style='width:100%;height:" + h + ";' onload='AutoOnloadIframe(" + divCount + ");'></iframe>";
   htmlStr = htmlStr + "                     </td>";
   htmlStr = htmlStr + "                 </tr>";
   htmlStr = htmlStr + "                 <tr>";
   htmlStr = htmlStr + "                     <td style='background-image:url(../images/dialognew/bottom_content.gif);height:4px;padding-left:0px;' align='right'></td>";
   htmlStr = htmlStr + "                 </tr>";
   htmlStr = htmlStr + "             </table>";
   htmlStr = htmlStr + "         </td>";
   htmlStr = htmlStr + "         <td style='background-image:url(../images/dialognew/right.gif);' width='5'></td>";
   htmlStr = htmlStr + "     </tr>";
   htmlStr = htmlStr + " </table>";
   htmlStr = htmlStr + " <table cellpadding='0' cellspacing='0' width='" + w1 + "'>";
   htmlStr = htmlStr + "     <tr>";
   htmlStr = htmlStr + "         <td width='5'><img style='display:block;' src='bottom_left.gif'/></td>";
   htmlStr = htmlStr + "         <td style='background-image:url(../images/dialognew/bottom.gif);background-color:#F0F0F0;'><img style='display:block;' src='spacer.gif' height='4' width='" + w2 + "' /></td>";
   htmlStr = htmlStr + "         <td width='5'><img style='display:block;' src='bottom_right.gif'/></td>";
   htmlStr = htmlStr + "     </tr>";
   htmlStr = htmlStr + " </table>";
        htmlStr = htmlStr + "</div>";
 
        divObj.innerHTML = htmlStr ;
 
        formObj.appendChild (divObj);
        
        InitDivPosition(h,w,divCount);
    }
    
//    自动加载DIV的位置（居屏幕的最中间）
    function InitDivPosition(objHeight, objWidth, divCount)
    {
        var n =divCount -1;       //用于层叠式显示多个DIV ，以28个像素为距
        var clientHeight =typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat' ? document.documentElement.clientHeight : document.body.clientHeight;
        var clientWidth =typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat' ? document.documentElement.clientWidth : document.body.clientWidth;
        var paraTop =(clientHeight)/2-objHeight>=0 ? (clientHeight)/2 - objHeight + n * 28 : n * 28;
        var paraLeft =(clientWidth)/2 - objWidth/2 + n * 28;
        
        var divID ="divfrm" + divCount;
        var objDiv =document.getElementById(divID);
        
//        获得页面被滚动条卷去的高度（若文档有了标准DTD声明，则高度需通过documentElement属性获取）
        var scrollPos; 
        if (typeof window.pageYOnuffset != 'undefined')
        { 
            scrollPos = window.pageYOffset; 
        } 
        else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat')
        { 
            scrollPos = document.documentElement.scrollTop; 
        } 
        else if (typeof document.body != 'undefined')
        { 
            scrollPos = document.body.scrollTop; 
        }
        
        objDiv.style.top =scrollPos + paraTop;
        objDiv.style.left =paraLeft;
    }
    
//    自适应Iframe的高度 [注：如果用户自定义了高度，则以自定义的高度为准！宽度暂时不控制 ]
    function AutoOnloadIframe(divCount)
    {
        eval("var frmObj =frm" + divCount);
        var RealHeight =typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat' ? frmObj.document.documentElement.scrollHeight : frmObj.document.all.dialogBody.scrollHeight;
        var RealWidth =typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat' ? frmObj.document.documentElement.scrollWidth : frmObj.document.all.dialogBody.scrollWidth;
        
       // eval("document.all.frm" + divCount + ".style.height=RealHeight");
       // eval("document.all.frm" + divCount + ".style.width=RealWidth");
        
        eval("document.all.divfrm" + divCount + ".style.width =RealWidth + 2;");
      //  eval("document.all.dMiddle" + divCount + ".style.width =RealWidth -6;");
      //  eval("document.all.dMain" + divCount + ".style.width =RealWidth");
    }
        
//    删除该DIV标签
    function delDivFrm(id)
    {
        var targetObj=document.getElementById(id);
	    if (targetObj ==null) 
		    alert("对象为空");
	    else
	    {
            targetObj.outerHTML="";
            document.body.removeChild(document.getElementById("MaskLayer"));
        }
}