`
thtwin
  • 浏览: 161069 次
  • 性别: 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属性
评论
发表评论

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

相关推荐

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