主要代码如下:
//  创建div
 var optDiv = document.createElement("DIV");
optDiv.id=_searchDiv;
document.body.appendChild(optDiv);
//设置div样式
 with (optDiv.style){
   position = _position;
   overflow = _overflow;
   width= _width;
   height= _height;
   top= _top+_top1;
   left= _left;
   background = _background;
   border= _border;
   display = _display;
   fontsize = _fontsize;
   borderColor = _borderColor;
}
//div内部代码省略
  
  document.body.appendChild(optDiv);
 
  var iframe = document.createElement("iframe");
iframe.id="ifm";
with(iframe.style){
 position = _position;
   width=0;
   height= 0;
   top= 0;
   left= 0;
   zIndex=0;
   display='block';
}
document.getElementById(_searchDiv).style.zIndex="100";
 document.getElementById(_searchDiv).appendChild(iframe);开始做的时候没考虑到被挡住的问题,后来问题出现后,在网上搜了一把,有人的建议是用一个iframe做底,主要目的是让div挡住iframe,然后iframe再挡住主页面的iframe……,照着把代码改了一下,结果还是不行,郁闷中……那位能给点解决方案 啊……困了一天了……谢谢

解决方案 »

  1.   


    <HTML>
    <HEAD><title>模仿IE自动完成功能,读取输入框存取记录</title>
    <style>
    body,div {
    font-family:verdana;
    line-height:100%;
    font-size:9pt;
    }
    input {
    width:300px;
    }/*-------------*/
    #divc {
    border:1px solid #333333;
    }
    .mouseover {
    color:#ffffff;
    background-color:highlight;
    width:100%;
    cursor:default;
    }
    .mouseout {
    color:#000000;
    width:100%;
    background-color:#ffffff;
    cursor:default;
    }
    </style>
    <SCRIPT LANGUAGE="JavaScript">
    function jsAuto(instanceName,objID)
    {
    this._msg = [];
    this._x = null;
    this._o = document.getElementById( objID );
    if (!this._o) return;
    this._f = null;
    this._i = instanceName;
    this._r = null;
    this._c = 0;
    this._s = false;
    this._v = null;
    this._o.style.visibility = "hidden";
    this._o.style.position = "absolute";
    this._o.style.zIndex = "9999";
    this._o.style.overflow = "auto";
    this._o.style.height = "200";
    return this;
    };
    jsAuto.prototype.directionKey=function() { with (this)
    {
    var e = _e.keyCode ? _e.keyCode : _e.which;
    var l = _o.childNodes.length;
    (_c>l-1 || _c<0) ? _s=false : ""; if( e==40 && _s )
    {
    _o.childNodes[_c].className="mouseout";
    (_c >= l-1) ? _c=0 : _c ++;
    _o.childNodes[_c].className="mouseover";
    }
    if( e==38 && _s )
    {
    _o.childNodes[_c].className="mouseout";
    _c--<=0 ? _c = _o.childNodes.length-1 : "";
    _o.childNodes[_c].className="mouseover";
    }
    if( e==13 )
    {
    if(_o.childNodes[_c] && _o.style.visibility=="visible")
    {
    _r.value = _x[_c];
    _o.style.visibility = "hidden";
    }
    }
    if( !_s )
    {
    _c = 0;
    _o.childNodes[_c].className="mouseover";
    _s = true;
    }
    }};
    // mouseEvent.
    jsAuto.prototype.domouseover=function(obj) { with (this)
    {
    _o.childNodes[_c].className = "mouseout";
    _c = 0;
    obj.tagName=="DIV" ? obj.className="mouseover" : obj.parentElement.className="mouseover";
    }};
    jsAuto.prototype.domouseout=function(obj)
    {
    obj.tagName=="DIV" ? obj.className="mouseout" : obj.parentElement.className="mouseout";
    };
    jsAuto.prototype.doclick=function(msg) { with (this)
    {
    if(_r)
    {
    _r.value = msg;
    _o.style.visibility = "hidden";
    }
    else
    {
    alert("javascript autocomplete ERROR :nn can not get return object.");
    return;
    }
    }};
    // object method;
    jsAuto.prototype.item=function(msg)
    {
    if( msg.indexOf(",")>0 )
    {
    var arrMsg=msg.split(",");
    for(var i=0; i<arrMsg.length; i++)
    {
    arrMsg[i] ? this._msg.push(arrMsg[i]) : "";
    }
    }
    else
    {
    this._msg.push(msg);
    }
    this._msg.sort();
    };
    jsAuto.prototype.append=function(msg) { with (this)
    {
    _i ? "" : _i = eval(_i);
    _x.push(msg);
    var div = document.createElement("DIV");
    //bind event to object.
    div.onmouseover = function(){_i.domouseover(this)};
    div.onmouseout = function(){_i.domouseout(this)};
    div.onclick = function(){_i.doclick(msg)};
    var re  = new RegExp("(" + _v + ")","i");
    div.style.lineHeight="140%";
    div.className = "mouseout";
    if (_v) div.innerHTML = msg.replace(re , "<strong>$1</strong>");
    div.style.fontFamily = "verdana";
    _o.appendChild(div);
    }};
    jsAuto.prototype.display=function() { with(this)
    {
    if(_f&&_v!="")
    {
    _o.style.left = _r.offsetLeft;
    _o.style.width = _r.offsetWidth;
    _o.style.top = _r.offsetTop + _r.offsetHeight;
    _o.style.visibility = "visible";
    }
    else
    {
    _o.style.visibility="hidden";
    }
    }};
    jsAuto.prototype.handleEvent=function(fValue,fID,event) { with (this)
    {
    var re;
    _e = event;
    var e = _e.keyCode ? _e.keyCode : _e.which;
    _x = [];
    _f = false;
    _r = document.getElementById( fID );
    _v = fValue;
    _i = eval(_i);
    re = new RegExp("^" + fValue + "", "i");
    _o.innerHTML="";
    for(var i=0; i<_msg.length; i++)
    {
    if(re.test(_msg[i]))
    {
    _i.append(_msg[i]);
    _f = true;
    }
    } _i ? _i.display() : alert("can not get instance");
    if(_f)
    {
    if((e==38 || e==40 || e==13))
    {
    _i.directionKey();
    }
    else
    {
    _c=0;
    _o.childNodes[_c].className = "mouseover";
    _s=true;
    }
    }
    }};
    window.onerror=new Function("return true;");
    </SCRIPT></HEAD>
    <BODY> <div id="divc">
    <!--this is the autocomplete container.-->
    </div>
    <div align="center">
    <input onkeyup="jsAutoInstance.handleEvent(this.value,'auto',event)" id="auto">
    </div>
    <SCRIPT LANGUAGE="JavaScript">
    var jsAutoInstance = new jsAuto("jsAutoInstance","divc");
    jsAutoInstance.item("a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start");
    jsAutoInstance.item("blueDestiny,我,我们,我们好,我们很好");
    jsAutoInstance.item("BlueMiracle,Blue");
    jsAutoInstance.item("angela,geniuslau");
    jsAutoInstance.item("never-online");
    </SCRIPT></BODY>
    </HTML>
      

  2.   

    再用个IFRAME覆盖到那个IFRAME上面 然后DIV放到这个IFRAME的上面
      

  3.   

    把z-index 设置的高点
    不行就用两个ifream ifream有z-index 属性
    z-index 设置的高点就是了 把div放进去
      

  4.   

    先用一个iframe盖住底下的iframe,然后用的div盖住生成的iframe。
    只要设置Div的z-index的值比iframe的值就可以了。。
      

  5.   

    我前段时间写的一个"javascript 通用对话框类"估计能解决你的问题http://www.cnblogs.com/xhzxlqt/archive/2009/04/30/1447290.html