一个popUp和parentDOM的交互问题
来源:互联网 发布:httpd php libphp5.so 编辑:程序博客网 时间:2024/06/10 04:28
页面代码如下:
<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">
<!--
function showDropdown()
{
var oPopup=window.createPopup();
oPopup.document.body.innerHTML=divPercent.innerHTML;
//oPopup.document.write("test!");
//oPopup.document.write("<script language"javascript">" + "function f(){alert('dynamic!!');}" + "</script>");
oPopup.show(0,25,150,100,l1);
//divPercent.style.height=50;
//divPercent.style.display="";
}
function handleComboItemMouseOver(id)
{
var item=window.document.getElementById(id);
item.style.backgroundColor="LightCyan";
}
function handleComboItemMouseOut(id)
{
var item=window.document.getElementById(id);
item.style.backgroundColor="whitesmoke";
}
//-->
</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
<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">...
<!--
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 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: 115px;
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">
<span style="FONT-FAMILY: Arial">10%</span>
</div>
<div id="p20" style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BACKGROUND-COLOR: whitesmoke">
<span style="FONT-FAMILY: Arial">20%</span>
</div>
<div id="p30" style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: 1px solid; BACKGROUND-COLOR: whitesmoke; border-buttom: black 1px solid">
<span style="FONT-FAMILY: Arial">30%</span>
</div>
</div>
</div>
</body>
</html>
效果:
- 一个popUp和parentDOM的交互问题
- Popup的一个应用.
- 一个Popup的日历控件
- PopUp和Graphics的使用
- [Effective WX] wxGTK上popup wxMenu的一个crash问题分析及解决方案
- popup window不能自动关闭的问题
- WPF:popup实现下拉列表的问题
- jquery mobile的popup不弹出问题。
- Dialog 和 Popup Window 的区别
- 【先挖坑,懂了再来填】遇到一个dsp和fpga交互的问题
- JSP和JavaScript数据交互的问题
- struts2和servlet的共存交互问题
- Android和H5的交互问题
- iOS和html5交互遇到的问题
- CSplitterWnd 和其他 UI 交互的问题
- 浅谈android和js的交互问题
- 【Unity】NGUI出现的问题,Popup List下拉菜单问题
- 用CWnd创建一个没有父窗体的POPUP窗口
- linux0.01操作系统读书笔记之一
- 这个杀手不太冷
- 第一篇文章
- 构建Linux系统下U盘路由器、防火墙
- 教您如何制作Red Hat 9自动安装光盘
- 一个popUp和parentDOM的交互问题
- 已经给留下邮箱地址的朋友发送源代码(不再回复)
- 漫谈WinCE的手写识别技术(三)
- 新人报道文
- 盗取QQ密码的Trojan.PSW.QQPass.rky正通过QQ信息中的网址传播
- 整理:数据结构面试大全
- 用JSP实现DOS形式缓冲网页
- 舍弃浮躁, 50条重要的C++学习建议
- 潮汕之行之开元国寺