virtual iframe. IE + FireFox

最新推荐文章于 2024-06-24 10:54:10 发布

原创最新推荐文章于 2024-06-24 10:54:10 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ie #function #null #iframe #table #input

Script 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的IFrame调整大小及拖动功能的示例。该示例通过自定义的IFrameControl类实现了浏览器窗口内的元素拖拽与调整大小功能，并针对不同浏览器类型进行了兼容性处理。

<!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>=IFrame= Test IE only</title>
<script type="text/javascript">
var IFrameControl = {
    _registerInstance:function(frame){this.frameInstance=frame},
    _funMouseDragEnd:function(){var _iframe = IFrameControl.getInstance();if(_iframe.Data.isDrag) IFrameControl.applyDrag(); IFrameControl.setDragStop();},
    _funMouseDragStart:function(){var _iframe = IFrameControl.getInstance(); if(!_iframe.Data.isDrag) {IFrameControl.applyDrag(); return;} if ((IFrameControl.IsIE && window.event && window.event.button==1) || (!IFrameControl.IsIE && typeof(arguments[0])=="object" && arguments[0].button>=0)) {var now_x = window.event ? event.x : arguments[0].pageX; var alpdiv = document.getElementById(_iframe.Data.alphaSplit);if (alpdiv) {alpdiv.style.left = parseInt(alpdiv.style.left) + now_x - _iframe.Data.xBegin + "px";_iframe.Data.xBegin  = now_x;}}},
    IsIE:(document.all!=undefined && document.all!=null),
    frameInstance:null,
    getInstance:function(argumentlist){return (argumentlist==null||argumentlist.length==0) ? this.frameInstance : argumentlist[0];},
    CreateInstance:function(sidebar, splitbar){var _frame=new IFrame(sidebar, splitbar);IFrameControl._registerInstance(_frame);return _frame;},
    RegisterDragEvent:function(startDragHandler, endDragHandler){if(window.attachEvent) {document.attachEvent("onmousemove", startDragHandler);document.attachEvent("onmouseup", endDragHandler);} else if (window.addEventListener) {window.addEventListener('mousemove', startDragHandler, false);window.addEventListener('mouseup', endDragHandler, false);}},
    UnRegisterDragEvent:function(startDragHandler, endDragHandler){if (window.detachEvent) {document.detachEvent("onmousemove", startDragHandler);document.detachEvent("onmouseup", endDragHandler);} else if (window.removeEventListener) {window.removeEventListener('mousemove', startDragHandler, false);window.removeEventListener('mouseup', endDragHandler, false);}},
    reSize:function() {var frame = IFrameControl.getInstance(); frame.sideElement.style.height = frame.rootElement.clientHeight - 5 + "px";},
    applyDrag:function(){var frame = IFrameControl.getInstance(); var mask = document.getElementById(frame.Data.maskFrame); var alpdiv = document.getElementById(frame.Data.alphaSplit); if (mask) frame.documentBody.removeChild(mask); if (alpdiv) {var x_Left = parseInt(alpdiv.style.left) - parseInt(alpdiv.style.width) + 1; frame.sideElement.style.width = (x_Left > 0 ? x_Left : 0) + "px"; frame.documentBody.removeChild(alpdiv);} IFrameControl.UnRegisterDragEvent(IFrameControl._funMouseDragStart, IFrameControl._funMouseDragEnd);},
    setDragStop:function(){var frame = IFrameControl.getInstance(); frame.Data.isDrag = false; if(IFrameControl.IsIE){frame.documentBody.createControlRange().select()}else{var ev = document.createEvent("Events");ev.initEvent("click", true, false);frame.spliterBar.dispatchEvent(ev);/*frame.spliterBar.fireEvent("onclick");frame.spliterBar.setSelectionRange(0,0);*/}},

    setDragStart:function()
    {
        var frame    = IFrameControl.getInstance();
        var alphaDiv = document.createElement("DIV");
        var maskDiv  = document.createElement("DIV");
        alphaDiv.id                 = frame.Data.alphaSplit;
        alphaDiv.style.top          = frame.spliterBar.offsetTop + "px";
        alphaDiv.style.left         = frame.spliterBar.offsetLeft + "px";
        alphaDiv.style.width        = Math.max(frame.spliterWidth, frame.spliterBar.clientWidth) + "px";
        alphaDiv.style.height       = frame.spliterBar.clientHeight + "px";
        alphaDiv.style.zIndex       = frame.spliterBar.style.zIndex + 20;
        alphaDiv.style.position     = "absolute";
        alphaDiv.style.cursor       = "e-resize";
        alphaDiv.style.background   = "#eeeeee";
        alphaDiv.style.borderLeft   = "1px dashed #000000";
        alphaDiv.style.borderRight  = "1px dashed #000000";
        frame.documentBody.appendChild(alphaDiv);

        maskDiv.id                  = frame.Data.maskFrame;
        maskDiv.style.top           = 0 + "px";
        maskDiv.style.left          = 0 + "px";
        maskDiv.style.width         = (frame.rootElement.clientWidth > frame.rootElement.scrollWidth) ? frame.rootElement.clientWidth : frame.rootElement.scrollWidth + "px";
        maskDiv.style.height        = (frame.rootElement.clientHeight > frame.rootElement.scrollHeight) ? frame.rootElement.clientHeight : frame.rootElement.scrollHeight + "px";
        maskDiv.style.zIndex        = frame.spliterBar.style.zIndex + 10;
        maskDiv.style.position      = "absolute";
        maskDiv.style.background    = "#ffffff";
        if (IFrameControl.IsIE)
            maskDiv.style.filter    = "progid:DXImageTransform.Microsoft.Alpha(opacity=30)";
        else
            maskDiv.style.opacity   = 0.3;
        frame.documentBody.appendChild(maskDiv);

        frame.Data.isDrag = true;
        frame.Data.xBegin = window.event ? event.x : arguments[0].pageX;
        IFrameControl.RegisterDragEvent(IFrameControl._funMouseDragStart, IFrameControl._funMouseDragEnd);
    }
};

function IFrame(sidebar, splitbar)
{
    this.Data         = {isDrag:false,xBegin:0,alphaSplit:sidebar+"alphaDiv",maskFrame:"shield"};
    this.spliterWidth = 5;
    this.rootElement  = document.documentElement||document.body;
    this.documentBody = document.body||document.documentElement;
    this.sideElement  = document.getElementById(sidebar);
    this.spliterBar   = document.getElementById(splitbar);

    this.spliterBar.style.width      = this.spliterWidth + "px";
    this.spliterBar.style.zIndex     = 100;
    this.spliterBar.style.background = "#666666";
    this.documentBody.style.margin   = 0 + "px";
    this.documentBody.style.padding  = 0 + "px";
    this.rootElement.style.overflow  = "hidden";

    if(window.attachEvent)
    {
        this.spliterBar.attachEvent("onmousemove", function(){IFrameControl.getInstance().spliterBar.style.cursor='e-resize'}); this.spliterBar.attachEvent("onmouseout",  function(){IFrameControl.getInstance().spliterBar.style.cursor='default'}); this.spliterBar.attachEvent("onmousedown", IFrameControl.setDragStart);
        window.attachEvent("onload", IFrameControl.reSize); window.attachEvent("onresize", IFrameControl.reSize);
    }
    else if(window.addEventListener)
    {
        this.spliterBar.addEventListener('mousemove', function(){IFrameControl.getInstance().spliterBar.style.cursor='e-resize'}, false); this.spliterBar.addEventListener('mouseout',  function(){IFrameControl.getInstance().spliterBar.style.cursor='default'}, false); this.spliterBar.addEventListener('mousedown', IFrameControl.setDragStart, false);
        window.addEventListener('load', IFrameControl.reSize, false); window.addEventListener('resize', IFrameControl.reSize, false);
    }
}
</script>

</head>
<body>
    <table border="0" style="width:100%;">
        <tr>
            <td style="width:1px;"><div id="leftsidearea" style="width:200px; overflow:auto;"><div style="height:2000px;">asdf</div></div></td>
            <td id="spliter"></td>
            <td>
                <pre>FireFox下有Bug. 拖动后部分UI被选择，第二次拖动时鼠标变形</pre>
                <table id="table1" border="1"></table>
            </td>
        </tr>
    </table>
</body>
<script type="text/javascript">
    IFrameControl.CreateInstance("leftsidearea", "spliter");
</script>

<script type="text/javascript" language="javascript">
var DOM={Element:{},Input:{},Search:{}};
DOM.IsIE = (navigator.appName=="Microsoft Internet Explorer");

DOM.GetEvent = DOM.IsIE? function(base){return window.event;}:function(base){return (base.length>0&&base[0].constructor==Event)?base[0]:null;};
DOM.GetEventElement = function(base){var ev=DOM.GetEvent(base);if(ev==null)return null; return DOM.IsIE?ev.srcElement:ev.target;};
DOM.RegisterObjectEvent = function(obj,param){if(DOM.IsIE){obj.attachEvent("on"+param[0],param[1]);}else{obj.addEventListener(param[0], param[1], false);}};

DOM.Input.TextBox = {
    NewTextBox:function(nameObj,hashAttr,value){var o=document.createElement("input");return o;},
    Validate2DateTime:function(){var element=DOM.GetEventElement(arguments);if(element==null)return;alert(element.value);},
    Validate2Number:function(fractionDigits){alert('Validate2Number');}
};

DOM.Search.MatchFirstWith = function(parent,matchHandler,param){var l=parent.childNodes.length;if(l>100)return null;for(var i=0;i<l;i++){if(matchHandler(param)){return parent.childNodes[i];}}}
DOM.Search.FindNodeByTagName = function(el, tag) {var l=el.childNodes.length; if(l>100){return null;}for(var i=0;i<l;i++){if(el.childNodes[i].tagName!=undefined && el.childNodes[i].tagName!=null && el.childNodes[i].tagName.toLowerCase()==tag.toLowerCase()){return el.childNodes[i];}}};
DOM.Search.FindNodeById = function(el, id) {var l=el.childNodes.length; if(l>100){return null;}for(var i=0;i<l;i++){var txtId=el.childNodes[i].getAttribute("id");if(txtId!=null&&el.childNodes[i].getAttribute("id").toLowerCase()==id.toLowerCase()){return el.childNodes[i];}}};

function TableBuilder(tableid)
{
    this._DataArray     = null;
    this._VirtualRoot   = null;
    this.IsIE           = (navigator.appName=="Microsoft Internet Explorer");
    this.Table          = document.getElementById(tableid);

    if (this.Table == null) {throw tableid+" is not found!";}
    if (this.Table.tBodies.length <= 0) {var tbody=document.createElement("tbody");this.Table.appendChild(tbody);this._VirtualRoot=tbody;} else {this._VirtualRoot=this.Table.tBodies.item(0);}
    if (!this.IsIE) {this._VirtualRoot.insertRow = function(index){var tr=document.createElement("tr");if(index==undefined||index==null){this.appendChild(tr);}else{this.insertBefore(tr,this.childNodes[index]);}return tr;}}

    this.RegisterTemplateCells = function(argumentsList) {this._DataArray=arguments;}
    this.ModifierTemplateCell = function(index, handler, param) {if(this._DataArray==null||this._DataArray.length<=index)return;handler(this._DataArray[index],param);}
    this.AppendTemplateCell = function(obj) {if(this._DataArray==null){this._DataArray=new Array();}this._DataArray[this._DataArray.length++]=obj;}

    this.Locate = function(i,j) {if(arguments.length>=2){return this._VirtualRoot.childNodes[i].childNodes[j];}else if(arguments.length>=1){return this._VirtualRoot.childNodes[i]}else{this._VirtualRoot}}
    this.CreateRow = function(index) {if(this._DataArray==null){throw "template undefined!";}var tr=(index==undefined||index==null)?this._VirtualRoot.insertRow():this._VirtualRoot.insertRow(index);if(tr==null){throw "create row failed!";}var l=this._DataArray.length;for(var i=0;i<l;i++){var td;if(this.IsIE){td=tr.insertCell()}else{td=document.createElement("td");tr.appendChild(td);};switch(typeof(this._DataArray[i])){case"object":td.appendChild(this._DataArray[i].cloneNode(true));break;case"string":td.innerHTML=this._DataArray[i];break;default:break;}}return tr;}
    this.RemoveRow = function(index) {if(this.Table.rows.length<=index)return false;if(this.IsIE){this._VirtualRoot.deleteRow(index)}else{this._VirtualRoot.removeChild(this._VirtualRoot.childNodes[index])}}
}

var tbuilder = new TableBuilder("table1");
tbuilder.RegisterTemplateCells("asdfsd", DOM.Input.TextBox.NewTextBox(), "ddddd", document.createElement("select"));
tbuilder.ModifierTemplateCell(1, DOM.RegisterObjectEvent, new Array("blur",DOM.Input.TextBox.Validate2DateTime));
tbuilder.CreateRow().cells[0].innerHTML="123";
tbuilder.CreateRow().cells[0].innerHTML="456";
tbuilder.CreateRow().cells[0].innerHTML="789";
tbuilder.CreateRow(1).cells[0].innerHTML="erwqqrwwer";
tbuilder.CreateRow(1);
tbuilder.CreateRow(1);
tbuilder.RemoveRow(1);
tbuilder.Locate(1).cells[1].innerHTML="<input type="button" onclick="alert('hehe');" />";
tbuilder.Locate(1,2).innerHTML="ba ga 2.";
tbuilder.Locate(2,1).setAttribute("id", "input1");
DOM.Search.FindNodeByTagName(tbuilder.Locate(2,1), "input").style.display="none";
DOM.Search.FindNodeById(tbuilder.Locate(2,1), "input1");

//if (DOM.IsIE)
//{
//    document.getElementById("ssddff").attachEvent("onblur", DOM.Input.TextBox.Validate2DateTime);
//}
//else
//{
//    document.getElementById("ssddff").addEventListener("blur", DOM.Input.TextBox.Validate2DateTime, false);
//}

</script>

</html>