一个popUp和parentDOM的交互问题

最新推荐文章于 2021-06-04 09:37:51 发布

cooleader320

最新推荐文章于 2021-06-04 09:37:51 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： Web 开发文章标签： function div javascript generator microsoft html

本文链接：https://blog.youkuaiyun.com/cooleader320/article/details/1497431

Web 开发专栏收录该内容

50 篇文章

订阅专栏

本文探讨了在Internet Explorer浏览器中实现自定义组合框样式时遇到的问题，并提供了两种解决方案。一种是通过显示隐藏的DIV来避免DOM结构分离，另一种是在弹出窗口中手动绑定鼠标悬停事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
        <title></title>
        <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
        <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
        <meta content="VisualStudio.HTML" name="ProgId">
        <meta content="Microsoft Visual Studio .NET 7.1" name="Originator">
        <base target="_top">
        <script language="javascript">

        </script>
    </head>
    <body>
        <P><label id="l1" onmouseover="this.style.cursor='hand'" style="BORDER-RIGHT: #ff6600 1px ridge; BORDER-TOP: #ff6600 1px ridge; BORDER-LEFT: #ff6600 1px ridge; BORDER-BOTTOM: #ff6600 1px ridge; BACKGROUND-COLOR: honeydew"
                onclick="showDropdown()">  ComboBox  </label></P>
        </FONT>
        <div id="divPercent" style=" DISPLAY: none" >
            <div style="
                    BORDER-RIGHT: black 1px solid;
                    BORDER-TOP: black 1px solid;
                    SCROLLBAR-FACE-COLOR: #889b9f;
                    OVERFLOW-X: hidden;
                    SCROLLBAR-HIGHLIGHT-COLOR: #c3d6da;
                    OVERFLOW: auto;
                    BORDER-LEFT: black 1px solid;
                    WIDTH: 120px;
                    SCROLLBAR-SHADOW-COLOR: #3d5054;
                    COLOR: blue;
                    SCROLLBAR-3DLIGHT-COLOR: #3d5054;
                    SCROLLBAR-ARROW-COLOR: #ffd6da;
                    SCROLLBAR-TRACK-COLOR: #95a6aa;
                    BORDER-BOTTOM: black 1px solid;
                    SCROLLBAR-DARKSHADOW-COLOR: #85989c;
                    HEIGHT: 100px;
                    BACKGROUND-COLOR: whitesmoke">
                <div id="p10" style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BACKGROUND-COLOR: whitesmoke"
                    onmouseover="this.style.backgroundColor='LightCyan'" onmouseout="this.style.backgroundColor='whitesmoke'"
                    onclick="this.document.parentWindow.getElementById('l1').text='test';"><span>10%</span>
                </div>
                <div id="p20" onmouseover="this.style.backgroundColor='LightCyan'" style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BACKGROUND-COLOR: whitesmoke"
                    onmouseout="this.style.backgroundColor='whitesmoke'" onclick="window.alert('20%');"><span>20%</span>
                </div>
                <div id="p30" onmouseover="f();" style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BACKGROUND-COLOR: whitesmoke"
                    onmouseout="this.style.backgroundColor='whitesmoke'"><span>30%</span>
                </div>
                <div id="p40" onmouseover="this.style.backgroundColor='LightCyan'" style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BACKGROUND-COLOR: whitesmoke"
                    onmouseout="this.style.backgroundColor='whitesmoke'"><span>40%</span>
                </div>
                <div id="p50" onmouseover="this.style.backgroundColor='LightCyan'" style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BACKGROUND-COLOR: whitesmoke"
                    onmouseout="this.style.backgroundColor='whitesmoke'"><span>50%</span>
                </div>
                <div id="p60" onmouseover="this.style.backgroundColor='LightCyan'" style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BACKGROUND-COLOR: whitesmoke"
                    onmouseout="this.style.backgroundColor='whitesmoke'"><span>60%</span>
                </div>
                <div id="p70" onmouseover="this.style.backgroundColor='LightCyan'" style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BACKGROUND-COLOR: whitesmoke"
                    onmouseout="this.style.backgroundColor='whitesmoke'"><span>70%</span>
                </div>
                <div id="p80" onmouseover="this.style.backgroundColor='LightCyan'" style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BACKGROUND-COLOR: whitesmoke"
                    onmouseout="this.style.backgroundColor='whitesmoke'"><span>80%</span>
                </div>
                <div id="p90" onmouseover="this.style.backgroundColor='LightCyan'" style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BACKGROUND-COLOR: whitesmoke"
                    onmouseout="this.style.backgroundColor='whitesmoke'"><span>90%</span>
                </div>
                <div id="p100" onmouseover="this.style.backgroundColor='LightCyan'" style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid; BACKGROUND-COLOR: whitesmoke"
                    onmouseout="this.style.backgroundColor='whitesmoke'"><span>100%</span>
                </div>
            </div>
        </div>
    </body>
</html>

运行效果如下：

问题：

当我把：

onmouseover="this.style.backgroundColor='LightCyan'" style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BACKGROUND-COLOR: whitesmoke"
onmouseout="this.style.backgroundColor='whitesmoke'" 独立出来写成javascript 函数，分别是：handleComboItemMouseOver,handleComboItemMouseOut 的时候，请求页面的时候，去提示: Microsoft JScript runtime error: Object expected ,不能正常现实combo item 的背景色

原因分析：

Popup对象的docment 和打开它的document ,不属于同一个DOM 结构，因此在Popup对象中，

不能够访问handleComboItemMouseOver，handleComboItemMouseOut 。如果原因是这样子的话，我

如何在另外一个DOM结构中通过javascript拿到parentWindow中的DOM元素或则javascript函数呢？

解决(from liu yuan)：

下面列了两种解决方法，希望能对解决问题有点提示

第一：重新修改你的CreatePopupwindow方法，修改为如下
主要功能是将隐藏的DIV打开而已，这样保证javascript和Dom树是一体工作的，自然不会有问题。

function showDropdown()
{
        //var oPopup=window.createPopup();
        //oPopup.document.body.innerHTML=divPercent.innerHTML;
        var oPopup=window.document.getElementById("divPercent");
        oPopup.style.POSITION="absolute";
        oPopup.style.top=35;
        oPopup.style.left=15;
        oPopup.style.display="";
        //oPopup.show(0,25,150,100,l1);
}

第二：
在Create的Window上添加事件，例如下面的代码，这样在打开的window 上的Item是有事件的

function showDropdown()
{
        var oPopup=window.createPopup();
        oPopup.document.body.innerHTML=divPercent.innerHTML;
        var p10=oPopup.document.getElementById("p10");
        p10.onmouseover=function()
        {
        handleComboItemMouseOver(this,"p10");
        }
        p10.onmouseout=function()
        {
        handleComboItemMouseOut(this,"p10");
        }
        oPopup.show(0,25,150,100,l1);
}

function handleComboItemMouseOver(con,id)
{
    var item=con.document.getElementById(id);
    item.style.backgroundColor="LightCyan";
}

function handleComboItemMouseOut(con,id)
{
    var item=con.document.getElementById(id);
    item.style.backgroundColor="whitesmoke";

}

修改后的Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<!--

function showDropdown()

{

var oPopup=window.createPopup();

oPopup.document.body.innerHTML=divPercent.innerHTML;

var p10=oPopup.document.getElementById("p10");

//first combo item

p10.onmouseover=function()

{

handleComboItemMouseOver(this,"p10");

}

p10.onmouseout=function()

{

handleComboItemMouseOut(this,"p10");

}

p10.onclick=function()

{

handleComboItemClick(oPopup,"p10");

}

//second combo item

var p20=oPopup.document.getElementById("p20");

p20.onmouseover=function()

{

handleComboItemMouseOver(this,"p20");

}

p20.onmouseout=function()

{

handleComboItemMouseOut(this,"p20");

}

p20.onclick=function()

{

handleComboItemClick(oPopup,"p20");

}

//third combo item

var p30=oPopup.document.getElementById("p30");

p30.onmouseover=function()

{

handleComboItemMouseOver(this,"p30");

}

p30.onmouseout=function()

{

handleComboItemMouseOut(this,"p30");

}

p30.onclick=function()

{

handleComboItemClick(oPopup,"p30");

}

//more combo items..........

//..........................................

oPopup.show(0,25,150,100,l1);

}

function handleComboItemMouseOver(con,id)

{

//alert(id);

var item=con.document.getElementById(id);

item.style.backgroundColor="LightCyan";

}

function handleComboItemMouseOut(con,id)

{

//alert("mouse out");

var item=con.document.getElementById(id);

item.style.backgroundColor="whitesmoke";

}

function handleComboItemClick(oPopup,percent)

{

//alert("mouse click");

var item=window.document.getElementById("l1");

item.innerText=percent;

oPopup.hide();

}

//-->

</script>

</head>

<body>

<P><label id="l1" onmouseover="this.style.cursor='hand'" style="BORDER-RIGHT: #ff6600 1px ridge; BORDER-TOP: #ff6600 1px ridge; BORDER-LEFT: #ff6600 1px ridge; BORDER-BOTTOM: #ff6600 1px ridge; BACKGROUND-COLOR: honeydew"

onclick="showDropdown()">  ComboBox  </label></P>

</FONT>

<div style="

BORDER-RIGHT: black 1px solid;

BORDER-TOP: black 1px solid;

SCROLLBAR-FACE-COLOR: #889b9f;

OVERFLOW-X: hidden;

SCROLLBAR-HIGHLIGHT-COLOR: #c3d6da;

OVERFLOW: auto;

BORDER-LEFT: black 1px solid;

WIDTH: 115px;

SCROLLBAR-SHADOW-COLOR: #3d5054;