`
thtwin
  • 浏览: 168269 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

关于iframe中生成父窗口元素及增加event事件的问题(IE已实现，Firefox暂未实现)

    博客分类：
  • JS
IEFirefoxjQueryJavaScript框架 
阅读更多
父页面，很简单 只有一个iframe (需求就是在动父页面的前提下实现)
<HTML>
<HEAD>
</HEAD>
<BODY><IFRAME id="ifr" name="ifr" src="ifr.htm" style=""></IFRAME><br>
</BODY>
</HTML>

ifr.htm 页面的js比较多
提示：使用IE和Firefox看运行后的区别
Java代码
<HTML>  
<HEAD>  
<SCRIPT>  
<!--  
var isIE = navigator.userAgent.toLowerCase().indexOf("msie") != -1;  
function $(id){return document.getElementById(id);}  
function b(){  
        if(window.parent.document.getElementById('hid'))return;  
        var h1 = window.parent.document.createElement("div");  
        h1.setAttribute("id","hid");  
        h1.style.position="absolute";  
        h1.style.width=880;  
        h1.style.height=120;  
          
        if(isIE)    h1.style.filter="Alpha(Opacity=50)";  
        else        h1.style.opacity=0.5;  
        h1.style.backgroundColor="red";  
        var hh = window.parent.document.body.appendChild(h1);  
        hh.innerHTML="我是可以拖动的半透明div，Firefox下暂时只能获取点击事件，event无解";  
          
          
        var oHead = window.parent.document.getElementsByTagName('head').item(0);   
        var sc= window.parent.document.createElement("script");   
        sc.type = "text/javascript";   
        if(isIE)    sc.text="document.getElementById('hid').onmousedown="+ieEvent;  
          
        //  firefox 的方法暂时没有实现  
        else    sc.text="var aa=document.getElementById('hid');alert(aa.innerHTML);"+  
                //"if(aa)aa.attachEvent('mousedown',"+firefoxEvent+",true)";  
                "if(aa)aa.onmousedown=function(){alert('普通的点击事件还是可以执行的')}";  
          
        oHead.appendChild(sc);   
}  
//IE  
function ieEvent(){  
    var event=window.parent.window.event;  
    var sIE = navigator.userAgent.toLowerCase().indexOf("msie") != -1;  
    drag = true;  
    xx=event.x;  
    yy=event.y;  
    L = document.getElementById("hid").offsetLeft;  
    T = document.getElementById("hid").offsetTop;  
      
    document.onmousemove = function() {  
        if (drag) {  
            document.getElementById("hid").style.left = L - (xx-event.x);  
            document.getElementById("hid").style.top = T - (yy-event.y);  
        }  
    }  
    document.onmouseup=function(){  
        drag = false;  
    }  
}  
//firefox  暂时没有好的方法  
function firefoxEvent(W3CEvent){  
    event = W3CEvent  
    drag = true;  
    xx=event.pageX;  
    yy=event.pageY;  
    L = document.getElementById("hid").offsetLeft;  
    T = document.getElementById('hid').offsetTop;  
    document.onmousemove = function(W3CEvent) {  
        event=W3CEvent;  
        if (drag) {  
            document.getElementById('hid').style.left = L - (xx-event.pageX);  
            document.getElementById('hid').style.top = T - (yy-event.pageY);  
        }  
    }  
    document.onmouseup=function(){drag = false;}  
}  
-->  
</SCRIPT>  
</HEAD>  
<BODY>  
<input type=button value="点我显示div" onclick="b()">  
</BODY>  
</HTML> 

<HTML>
<HEAD>
<SCRIPT>
<!--
var isIE = navigator.userAgent.toLowerCase().indexOf("msie") != -1;
function $(id){return document.getElementById(id);}
function b(){
if(window.parent.document.getElementById('hid'))return;
var h1 = window.parent.document.createElement("div");
h1.setAttribute("id","hid");
h1.style.position="absolute";
h1.style.width=880;
h1.style.height=120;

if(isIE) h1.style.filter="Alpha(Opacity=50)";
else h1.style.opacity=0.5;
h1.style.backgroundColor="red";
var hh = window.parent.document.body.appendChild(h1);
hh.innerHTML="我是可以拖动的半透明div，Firefox下暂时只能获取点击事件，event无解";


var oHead = window.parent.document.getElementsByTagName('head').item(0);
var sc= window.parent.document.createElement("script");
sc.type = "text/javascript";
if(isIE) sc.text="document.getElementById('hid').onmousedown="+ieEvent;

// firefox 的方法暂时没有实现
else sc.text="var aa=document.getElementById('hid');alert(aa.innerHTML);"+
//"if(aa)aa.attachEvent('mousedown',"+firefoxEvent+",true)";
"if(aa)aa.onmousedown=function(){alert('普通的点击事件还是可以执行的')}";

oHead.appendChild(sc);
}
//IE
function ieEvent(){
var event=window.parent.window.event;
var sIE = navigator.userAgent.toLowerCase().indexOf("msie") != -1;
drag = true;
xx=event.x;
yy=event.y;
L = document.getElementById("hid").offsetLeft;
T = document.getElementById("hid").offsetTop;

document.onmousemove = function() {
if (drag) {
document.getElementById("hid").style.left = L - (xx-event.x);
document.getElementById("hid").style.top = T - (yy-event.y);
}
}
document.onmouseup=function(){
drag = false;
}
}
//firefox  暂时没有好的方法
function firefoxEvent(W3CEvent){
event = W3CEvent
drag = true;
xx=event.pageX;
yy=event.pageY;
L = document.getElementById("hid").offsetLeft;
T = document.getElementById('hid').offsetTop;
document.onmousemove = function(W3CEvent) {
event=W3CEvent;
if (drag) {
document.getElementById('hid').style.left = L - (xx-event.pageX);
document.getElementById('hid').style.top = T - (yy-event.pageY);
}
}
document.onmouseup=function(){drag = false;}
}
-->
</SCRIPT>
</HEAD>
<BODY>
<input type=button value="点我显示div" onclick="b()">
</BODY>
</HTML>


最开始我只是想实现一个拖动div功能，后来想到页面框架中iframe中的div不能在整个页面中拖动就想修改下
现在只能实现IE下生成一个可以拖动的div
Firefox痛苦中... 主要还是event的问题 不是很了解兼容问题
代码里面肯定会有很多冗余的东西，不过没有真正放到项目里面还没想精简代码的方法
同时希望高手点拨一下类似的方法应该怎样实现

下面放上代码 3个页面，一个是那个简单拖动div方法，另外两个就是那个头疼的页面了 index.htm

http://dl.iteye.com/topics/download/8c53659b-0ab8-3487-bc90-f60173465a8b
问题补充：
父页面，很简单 只有一个iframe (需求就是在不动父页面的前提下实现)
<HTML>
<HEAD>
</HEAD>
<BODY><IFRAME id="ifr" name="ifr" src="ifr.htm" style=""></IFRAME><br>
</BODY>
</HTML>

ifr.htm 页面的js比较多
提示：使用IE和Firefox看运行后的区别
Java代码
<HTML>  
<HEAD>  
<SCRIPT>  
<!--  
var isIE = navigator.userAgent.toLowerCase().indexOf("msie") != -1;  
function $(id){return document.getElementById(id);}  
function b(){  
        if(window.parent.document.getElementById('hid'))return;  
        var h1 = window.parent.document.createElement("div");  
        h1.setAttribute("id","hid");  
        h1.style.position="absolute";  
        h1.style.width=880;  
        h1.style.height=120;  
          
        if(isIE)    h1.style.filter="Alpha(Opacity=50)";  
        else        h1.style.opacity=0.5;  
        h1.style.backgroundColor="red";  
        var hh = window.parent.document.body.appendChild(h1);  
        hh.innerHTML="我是可以拖动的半透明div，Firefox下暂时只能获取点击事件，event无解";  
          
          
        var oHead = window.parent.document.getElementsByTagName('head').item(0);   
        var sc= window.parent.document.createElement("script");   
        sc.type = "text/javascript";   
        if(isIE)    sc.text="document.getElementById('hid').onmousedown="+ieEvent;  
          
        //  firefox 的方法暂时没有实现  
        else    sc.text="var aa=document.getElementById('hid');alert(aa.innerHTML);"+  
                //"if(aa)aa.attachEvent('mousedown',"+firefoxEvent+",true)";  
                "if(aa)aa.onmousedown=function(){alert('普通的点击事件还是可以执行的')}";  
          
        oHead.appendChild(sc);   
}  
//IE  
function ieEvent(){  
    var event=window.parent.window.event;  
    var sIE = navigator.userAgent.toLowerCase().indexOf("msie") != -1;  
    drag = true;  
    xx=event.x;  
    yy=event.y;  
    L = document.getElementById("hid").offsetLeft;  
    T = document.getElementById("hid").offsetTop;  
      
    document.onmousemove = function() {  
        if (drag) {  
            document.getElementById("hid").style.left = L - (xx-event.x);  
            document.getElementById("hid").style.top = T - (yy-event.y);  
        }  
    }  
    document.onmouseup=function(){  
        drag = false;  
    }  
}  
//firefox  暂时没有好的方法  
function firefoxEvent(W3CEvent){  
    event = W3CEvent  
    drag = true;  
    xx=event.pageX;  
    yy=event.pageY;  
    L = document.getElementById("hid").offsetLeft;  
    T = document.getElementById('hid').offsetTop;  
    document.onmousemove = function(W3CEvent) {  
        event=W3CEvent;  
        if (drag) {  
            document.getElementById('hid').style.left = L - (xx-event.pageX);  
            document.getElementById('hid').style.top = T - (yy-event.pageY);  
        }  
    }  
    document.onmouseup=function(){drag = false;}  
}  
-->  
</SCRIPT>  
</HEAD>  
<BODY>  
<input type=button value="点我显示div" onclick="b()">  
</BODY>  
</HTML> 

<HTML>
<HEAD>
<SCRIPT>
<!--
var isIE = navigator.userAgent.toLowerCase().indexOf("msie") != -1;
function $(id){return document.getElementById(id);}
function b(){
if(window.parent.document.getElementById('hid'))return;
var h1 = window.parent.document.createElement("div");
h1.setAttribute("id","hid");
h1.style.position="absolute";
h1.style.width=880;
h1.style.height=120;

if(isIE) h1.style.filter="Alpha(Opacity=50)";
else h1.style.opacity=0.5;
h1.style.backgroundColor="red";
var hh = window.parent.document.body.appendChild(h1);
hh.innerHTML="我是可以拖动的半透明div，Firefox下暂时只能获取点击事件，event无解";


var oHead = window.parent.document.getElementsByTagName('head').item(0);
var sc= window.parent.document.createElement("script");
sc.type = "text/javascript";
if(isIE) sc.text="document.getElementById('hid').onmousedown="+ieEvent;

// firefox 的方法暂时没有实现
else sc.text="var aa=document.getElementById('hid');alert(aa.innerHTML);"+
//"if(aa)aa.attachEvent('mousedown',"+firefoxEvent+",true)";
"if(aa)aa.onmousedown=function(){alert('普通的点击事件还是可以执行的')}";

oHead.appendChild(sc);
}
//IE
function ieEvent(){
var event=window.parent.window.event;
var sIE = navigator.userAgent.toLowerCase().indexOf("msie") != -1;
drag = true;
xx=event.x;
yy=event.y;
L = document.getElementById("hid").offsetLeft;
T = document.getElementById("hid").offsetTop;

document.onmousemove = function() {
if (drag) {
document.getElementById("hid").style.left = L - (xx-event.x);
document.getElementById("hid").style.top = T - (yy-event.y);
}
}
document.onmouseup=function(){
drag = false;
}
}
//firefox  暂时没有好的方法
function firefoxEvent(W3CEvent){
event = W3CEvent
drag = true;
xx=event.pageX;
yy=event.pageY;
L = document.getElementById("hid").offsetLeft;
T = document.getElementById('hid').offsetTop;
document.onmousemove = function(W3CEvent) {
event=W3CEvent;
if (drag) {
document.getElementById('hid').style.left = L - (xx-event.pageX);
document.getElementById('hid').style.top = T - (yy-event.pageY);
}
}
document.onmouseup=function(){drag = false;}
}
-->
</SCRIPT>
</HEAD>
<BODY>
<input type=button value="点我显示div" onclick="b()">
</BODY>
</HTML>


最开始我只是想实现一个拖动div功能，后来想到页面框架中iframe中的div不能在整个页面中拖动就想修改下
现在只能实现IE下生成一个可以拖动的div
Firefox痛苦中... 主要还是event的问题 不是很了解兼容问题
代码里面肯定会有很多冗余的东西，不过没有真正放到项目里面还没想精简代码的方法
同时希望高手点拨一下类似的方法应该怎样实现

下面放上了代码 3个页面，一个是那个简单拖动div方法，另外两个就是那个头疼的页面了 index.htm


问题补充：
刚不小心点错了...又重新发了一遍问题...
对jquery不是很了解 尤其是动态创建元素
试过jquery的 $('x').bind('click',function(event){})
$('x').click(function(event){})之类的方法
依旧无法解决Firefox的兼容问题 只能回归JavaScript不借助框架
问题补充：
主要还是那个关于iframe的问题
这个拖拽不难...关键是要在父页面动态生成
那个拖拽只是我实现的一个功能，然后由这个功能引出的问题

分别在IE和Firefox中打开那个index.htm就能看到区别了
我需要的是Firefox下的获取父页面event解决方法

PS:感谢 蔡华江 的jQuery ，开始拖动提示错误，后来才发现我的jquery版本太低
问题补充：
好了 问题解决了 经典论坛的高人还是蛮多的

思路：
var gE=new Object();
...
sc.text="document.getElementById('hid').onmousedown=function(e){gE=e;("+firefoxEvent+")();}";
...
event = window.parent.gE;
分享到：
| Javascript拖拽之offsetParent属性
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ExtAspNet v2.2.1 （2009-4-1） 值得一看

    支持的浏览器: IE 7.0+, Firefox 3.0+, Chrome 2.0+, Opera 9.5+, Safari 3.0+ 注：ExtAspNet基于一些开源的程序ExtJS, HtmlAgilityPack, Nii.JSON, YUICompressor。 示例: http://extasp.net/ 开源: ...

    ExtAspNet_v2.3.2_dll

    支持的浏览器: IE 7.0+, Firefox 3.0+, Chrome 2.0+, Opera 9.5+, Safari 3.0+ 注：ExtAspNet基于一些开源的程序ExtJS, HtmlAgilityPack, Nii.JSON, YUICompressor。 示例: http://extasp.net/ 开源: ...

    电镀生产线中西门子S7-300 PLC控制程序详解及其应用

    内容概要：本文详细介绍了应用于电镀生产线的西门子S7-300 PLC控制系统的程序设计、硬件配置以及调试过程中积累的实际经验。主要内容涵盖温度控制、条码记录、行车定位、故障排查等方面的技术细节。文中展示了多个关键功能模块的具体实现方法，如PID温度控制、条码数据处理、行车定位判断等，并分享了一些实用的调试技巧和注意事项。此外，还讨论了硬件配置中的重要细节，如模块地址分配、网络拓扑设计等。 适合人群：从事自动化控制领域的工程师和技术人员，尤其是对PLC编程有一定基础的人群。 使用场景及目标：适用于需要深入了解和掌握电镀生产线自动化控制技术的专业人士。目标是帮助读者理解S7-300 PLC在电镀生产线中的具体应用，提高实际项目的开发效率和可靠性。 其他说明：文章不仅提供了详细的程序代码示例，还分享了许多来自一线的真实案例和实践经验，对于解决实际工程中的问题具有很高的参考价值。

    COMSOL仿真中固体超声导波的二维建模与分析：基于汉宁窗调制的200kHz正弦激励信号

    内容概要：本文详细介绍了使用COMSOL Multiphysics进行固体超声导波的二维仿真过程。作者通过建立一个10mm×100mm的铝板模型，应用汉宁窗调制的5周期200kHz正弦激励信号，研究了超声导波在铝板中的传播特性及其模式转换现象。文中涵盖了从模型构建、材料参数设置、网格划分、边界条件设定、激励信号施加到求解设置以及结果分析的完整流程。特别强调了汉宁窗调制的作用，即减少频谱泄漏并提高信号质量。 适合人群：从事超声检测、材料科学、物理学等相关领域的研究人员和技术人员，尤其是那些希望深入了解COMSOL仿真工具及其在超声导波研究中应用的人群。 使用场景及目标：适用于需要精确模拟超声波在固体介质中传播的研究项目，旨在验证理论预测、优化实验设计、评估不同材料和结构对超声波的影响。此外，还可以用于教学目的，帮助学生掌握COMSOL软件的操作方法和超声导波的基础知识。 其他说明：文中提供了详细的参数设置指导和代码片段，有助于读者快速复现仿真过程。同时，作者分享了一些实用技巧，如如何正确设置网格大小、选择合适的窗函数等，以确保仿真结果的准确性。

    离职人员分析仪表盘.xlsx

    离职人员分析仪表盘.xlsx

    基于LabVIEW的多功能虚拟函数信号发生器设计与信号分析

    内容概要：本文详细介绍了如何利用LabVIEW搭建一个多功能的虚拟函数信号发生器及其信号分析功能。首先，文章展示了如何通过LabVIEW的前面板和程序框图创建各种常见波形（如正弦波、方波、三角波等），并深入探讨了波形生成的具体实现方法，包括三角波的周期性和斜率计算、白噪声的生成以及自定义公式的解析。接着，文章讨论了信号处理的关键技术，如自相关分析、频谱分析、积分和微分运算，并提供了具体的实现代码和注意事项。此外，文中还分享了一些实用的经验和技术细节，如避免频谱泄漏的方法、处理多频波的技术、防止内存泄漏的措施等。 适用人群：从事信号处理、电子工程、自动化控制等领域的工作技术人员，尤其是那些熟悉或希望学习LabVIEW编程的人士。 使用场景及目标：适用于实验室环境或教学环境中，用于替代传统物理信号发生器进行信号生成和分析实验。主要目标是提高信号生成和分析的灵活性和便捷性，减少对昂贵硬件设备的依赖。 其他说明：本文不仅提供了详细的代码示例，还分享了许多作者在实践中积累的经验教训，帮助读者更好地理解和应用LabVIEW进行信号处理。

    线性代数_矩阵运算_方程组解释_MIT公开课笔记用途_1742822302.zip

    线性代数

    大雾至尊版V56泛滥无密码.zip

    大雾至尊版V56泛滥无密码.zip

    员工生日关怀方案.doc

    员工生日关怀方案

    试用期情况跟踪表.xls

    试用期情况跟踪表.xls

    员工激励机制与技巧.doc

    员工激励机制与技巧

    员工晋升的自我评价.doc

    员工晋升的自我评价.doc

    基于51单片机protues仿真的多功能婴儿车控制器（仿真图、源代码、AD原理图）

    基于51单片机protues仿真的多功能婴儿车控制器（仿真图、源代码、AD原理图） 该设计为51单片机protues仿真的多功能婴儿车控制器，实现温湿度，音乐，避障，声音监测控制； 1、温湿度检测，婴儿尿湿时会有提醒。 2、声音检测，当婴儿啼哭时也会有提醒。 3、小车避障，小车遇到障碍会后退左转。 4、音乐播放。 5、仿真图、源代码、AD原理图；

    【计算机求职笔试】编程语言基础、数据结构与算法、系统设计等核心考点解析及备考建议介绍了计算机求职笔试

    内容概要：本文档详细介绍了计算机求职笔试的内容与解答，涵盖编程语言基础、数据结构与算法、编程实践与调试、系统设计与软件工程以及综合题型与开放题五个方面。编程语言基础部分强调了语法规则、数据类型与运算符、面向对象编程的核心概念；数据结构与算法部分讲解了常见数据结构（如线性结构、树与图、哈希表）和高频算法（如排序算法、动态规划、递归与回溯）；编程实践与调试部分关注编码能力和调试技巧；系统设计与软件工程部分探讨了设计模式、模块化设计、数据库与网络知识；综合题型与开放题部分则提供了场景题和逻辑思维题的示例。最后给出了备考建议，包括知识体系构建、刷题策略和模拟实战的方法。 适合人群：即将参加计算机相关职位笔试的求职者，特别是对编程语言、数据结构、算法设计有初步了解的应届毕业生或初级工程师。 使用场景及目标：①帮助求职者系统复习计算机基础知识，提升笔试通过率；②通过例题和解答加深对编程语言、数据结构、算法的理解；③提供模拟实战环境，提高时间管理和抗压能力。 阅读建议：建议按照文档提供的知识体系顺序进行系统复习，重点攻克高频题型，利用在线平台刷题练习，并结合实际项目经验进行综合应用，同时注意时间管理和抗压能力的训练。

    SecureCRT安装包

    SecureCRT安装包

    物流业人才流失与紧缺现象的对策研究.docx

    物流业人才流失与紧缺现象的对策研究

    招聘渠道费用仪表盘P10.pptx

    招聘渠道费用仪表盘P10.pptx

    五相永磁同步电机Simulink中PI双闭环SVPWM矢量控制建模与优化

    内容概要：本文详细介绍了五相永磁同步电机在Simulink环境下的PI双闭环SVPWM矢量控制建模过程及其优化方法。首先阐述了五相电机相比三相电机的优势，如更小的转矩脉动和更强的容错能力。接着探讨了复杂的Simulink模型搭建，涉及电机本体模块、坐标变换模块、SVPWM模块和PI调节器模块等多个组件。文中提供了具体的Clark变换和PI调节器的代码示例，解释了双闭环控制的工作原理，并详细描述了SVPWM与十扇区划分的具体实现方式。最后展示了模型的性能表现，包括良好的波形质量和快速的动态响应特性。 适合人群：从事电机控制领域的研究人员和技术人员，尤其是对五相永磁同步电机和Simulink建模感兴趣的读者。 使用场景及目标：适用于希望深入了解五相永磁同步电机控制原理并掌握具体实现方法的研究人员和技术人员。目标是帮助读者理解五相电机的特殊性和复杂性，掌握PI双闭环SVPWM矢量控制的建模技巧，提高电机控制系统的设计水平。 其他说明：文章不仅提供了理论知识，还包括了大量的代码片段和实践经验分享，有助于读者更好地理解和应用相关技术。

    员工离职交接表-模板.doc

    员工离职交接表-模板.doc

Magicbox
Global site tag (gtag.js) - Google Analytics