一个popUp和parentDOM的交互问题

最新推荐文章于 2021-05-05 17:33:05 发布
最新推荐文章于 2021-05-05 17:33:05 发布
阅读量1.9k 收藏
点赞数
分类专栏： Web 开发 文章标签： function div javascript generator microsoft html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cooleader320/article/details/1497431
版权

页面代码如下：

<! 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" >
<!--

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()" >   &nbsp; ComboBox  &nbsp; </ 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 >

 

运行效果如下：

 

  • 问题：

                        当我把：

                       οnmοuseοver="this.style.backgroundColor='LightCyan'" style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BACKGROUND-COLOR: whitesmoke"
                      οnmοuseοut="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.οnmοuseοver=function()
        {
        handleComboItemMouseOver(this,"p10");
        }
        p10.οnmοuseοut=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 >
         < 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()" >   &nbsp; ComboBox  &nbsp; </ 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 >

 

 效果：

cooleader320
关注
专栏目录
MapBox采用marker方式加载图标图层（解决symbol图标丢失问题）
lz5211314121的博客
03-01 1798
也就是点要素已经添加在地图上了，但是点要素对应的图片还没请求回来，mapbox在这方面的处理是请求不回来就不请求了，然后给你抛出一个监听，叫做：styleimagemissing，然而我发现在这个监听里面写代码显得尤为费劲，即使你在这个监听里再次请求没请求成功的图片，也不会再次触发地图渲染，必须调用map.repaint()。2.图层的删除问题。我们可以预先设定一个数组。这样的话marker对象就会存储在这个数组中，然后删除的时候遍历这个数组里的marker，调用marker自身的remove方法。
Selenium自动化常见问题（问题及答案）
程序员-小枫的博客
08-21 3244
Selenium自动化常见问题 Selenium是最流行的web端自动化测试框架之一，用于自动执行用户对被测产品的操作。Selenium是开源的，Selenium框架的核心组件是Selenium WebDriver。Selenium WebDriver允许使用者在不同的浏览器（例如Chrome，Firefox，Internet Explorer，Microsoft Edge等）上执行测试用例。使用Selenium WebDriver的主要优点是它支持.NET，Java，C＃，Python等。可以参考有关.
JavaScript运行错误
salangane0954的专栏
02-12 776
代码：   WebForm2        http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">   function getNatLog10()  {  return Math.LN10 }         错误信息：编译错误 说明: 在编译向该请求提供服务所需资源的过程中出现错误。请检查下列
HTML页面打印分页标签样式
02-23 315
<html> <head> <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5"> <title>***上海市眼病防治中心病人结帐费用报表***</title> <meta h...
一个javascript的小问题
lincnl的专栏
05-26 978
　　在页面上执行一段javascript代码脚本，对用户的输入进行验证，如果没有http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">声明的话不管你的javascript脚本的返回值是true还是false都会进入后台执行cs代码！　　哈哈，多注意哦！ 
.net实现生成及打印条形码功能
那一抹、璀璨
12-25 1500
.net实现生成及打印条形码功能,下面简单总结了自己的实现方法。        1.引用dll文件      将FLX.WebControls.dll文件拷贝到顶目的bin文件夹目录中；     2.配置web.config文件      在之间添加如下代码                        3.新建aspx文件，代码如下      前台文件：
使用JavaScript的菜单和子菜单
04-04
rp=%2FKB%2Fscripting%2FWindow_Popup%2FWorkingExample.zip&download=true”则可能是一个工作示例的下载链接，通过解压和查看这些文件，你可以亲自实践并调试JavaScript菜单和子菜单的实现。 总的来说，理解和掌握...
前端跨域问题与解决方案
跨域问题指的是当一个网页的脚本（通常是JavaScript）去访问另一个网页的资源时，如果这两个网页的域名、协议、端口不相同，就会产生跨域问题。浏览器的"同源政策"会阻止这种跨域访问，以保护用户的信息和安全。 ##...
【前端】跨域 问题 原理 + 解决方案 下
高精尖发展
08-31 401
前言：      上一篇的排版好难看，字体都不能设置，我们可不可以不悲伤——怎么可能 正文： 先复习一下jsonp，上图一张【源】     iFrame解决跨域 如果两个网页不同源，就无法拿到对方的DOM：iframe窗口和window.open方法打开的窗口，它们与父窗口无法通信 document.getElementById("myIFrame").contentWind...
上传和下载文件的代码.
lyb_abiandbel的专栏
10-21 2779
上传:(可以实现依次上传多个文件)前台:   WebNewBid        http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">      function addFile()  {      var str =       document.getElementById(MyFile).inser
该效果在firefox和IE中测试通过.拖动然后就布局自动保存到数据库里了.
cxzhq2002的杂记
01-09 2595
asp.net+javascript+css(模仿google的拖拽的个性网页布局)(操作数据库篇2) 该效果在firefox和IE中测试通过.拖动然后就布局自动保存到数据库里了. SaveSide .aspx.cs  public class SaveSide : System.Web.UI.Page  {   ahui4367.SideSql tempSideSql=ne
Popup窗口访问父窗口的方法以及相互传值
liruizhuang的专栏
09-08 1374
此 IVisualElement 对象的所有者。默认情况下，它是此 IVisualElement 对象的父代。不过，如果此 IVisualElement 对象是由其父代弹出的一个子组件（如 ComboBox 控件的下拉列表），则所有者是弹出此 IVisualElement 对象的组件。 此属性并非由 Flex 管理，而由各个组件管理。因此，如果使用 PopUpManger.createPopUp() 或 PopUpManger.addPopUp() 方法弹出一个子组件，则应该将该子组件的 owner 属性设
VCL 窗体 Z-ORDER
舞天涯的专栏
05-05 238
现在基本都是在做FMX运用，最近一个项目本来也是用FMX来做，但是在做初步规划的时候发现，FMX比较麻烦，因为要和下位机通信，并且实时显示下位机送上来的数据（SOCKET通信，各种传感器的数据），波形图显示方面的控件，FMX下没找到好用的，VCL下倒是有IOCOM等工控控件可以用。决定还是用VCL来做，而且也只在WINDOWS下运用。 搞习惯了FMX的界面布局，在VCL没有LAYOUT控件真感觉不方便啊。 回到正题，在一个ShowModal窗体上再弹出ShowModal窗体，如果这个窗体不是需要满屏显示
PopUpWindow使用详解(二)——进阶及答疑
启舰
10-20 3万+
前言：有人问我，即便梦想成真了又能怎样，或许不能怎样，但这是梦想。 相关文章：1、《PopUpWindow使用详解(一)——基本使用》2、《PopUpWindow使用详解(二)——进阶及答疑》 上篇为大家基本讲述了有关PopupWindow的基本使用，但还有几个相关函数还没有讲述，我们这篇将着重看看这几个函数的用法并结合源码来讲讲具体原因，最后是有关PopupWindow在使用时的疑...
PopUpWindow使用详解(一)——基本使用
热门推荐
启舰
10-20 17万+
前言：不要嫌前进的慢，只要一直在前进就好。 相关文章： 1、《PopUpWindow使用详解(一)——基本使用》 2、《PopUpWindow使用详解(二)——进阶及答疑》 有同学讲到想要知道PopUpWindow的知识，这里就给大家讲一讲PopUpWindow的基本用法和原理吧。这段时间博客可能会更新比较慢，因为你懂的 !!-_- ，往左看公告，嘿嘿。 先看一下我们要做的效果...
谷歌插件popup.html怎么和js交互
最新发布
06-11
在谷歌插件的popup.html中，可以使用chrome.extension.getBackgroundPage()方法获取到background.js中的对象，从而实现popup.html和background.js之间的通信。 例如，在popup.html中可以通过以下代码获取到background.js中的对象： ``` var backgroundPage = chrome.extension.getBackgroundPage(); ``` 获取到background.js中的对象之后，就可以调用background.js中的方法或者访问background.js中的变量了。 另外，也可以使用chrome.extension.sendMessage()和chrome.extension.onMessage.addListener()方法来实现popup.html和background.js之间的通信。具体实现方法请参考谷歌插件的官方文档。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值