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

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

相关推荐

    iframe和父窗口通讯实例

    而关于`iframe`与父窗口之间的通信，是Web开发中的一个重要概念，它允许两个独立的上下文之间进行数据交换，即`iframe`内容与包含它的父页面进行互动。 在`iframe`和父窗口通信的过程中，主要涉及以下几个知识点： ...

    Jquery调用iframe父页面中的元素及方法

    在Web开发中，iframe是一个非常实用的HTML标签，它允许在父页面中嵌入另一个...此外，开发者也应当留意HTML5标准中对iframe的新规定，例如关于内容安全策略（CSP）的要求，以及IE10及以上版本对iframe的兼容性和限制。

    父窗口调用iframe子窗口方法

    在Web开发中，"父窗口调用iframe子窗口方法"是一个常见的交互场景，尤其是在构建复杂的单页面应用或者需要跨窗口通信时。这篇文章将详细讲解如何实现这个功能，并提供相关的源码示例。 首先，理解基本概念。`iframe...

    子窗口iframe跳转到父窗口

    ### 子窗口iframe跳转到父窗口的知识点详解 #### 一、背景介绍 在现代Web开发中，`iframe`（Inline Frame）是一种常见的技术，用于在当前网页中嵌入另一个网页或文档。通过`iframe`，开发者可以实现丰富的功能，如...

    jquery、js调用iframe父窗口与子窗口元素的方法整理.docx

    然而，在使用iframe时，经常会遇到一个问题：如何在iframe中访问父窗口的元素，或者在父窗口中访问iframe中的元素？本文将对jquery和js调用iframe父窗口与子窗口元素的方法进行整理。 1. jquery在iframe子页面获取...

    JavaScript实现IFrame子窗口调用父窗口的全局变量

    JavaScript实现IFrame子窗口调用父窗口的全局变量

    HTML中IFrame父窗口与子窗口相互操作

    使用`document.frames`对象（在IE中）或`contentDocument`属性（在非IE浏览器如Firefox中）可以访问子窗口的DOM元素。例如，`document.frames("ObjectID").document.getElementById("ContentID")`或`document....

    JavaScript操作iframe父窗口和子窗口例子

    在Web应用程序中，iframe（Inline Frame）常用于嵌入其他网页或者实现页面的局部刷新，而父窗口与子窗口之间的通信则能实现更复杂的交互逻辑。 在JavaScript中，通过window对象我们可以访问到当前窗口的各种属性和...

    js实现ifram取父窗口URL地址的方法

    这一过程利用了JavaScript中的window.parent对象，它是iframe元素与父窗口之间的桥梁。 首先，理解window对象在JavaScript中的地位非常关键。window对象代表了浏览器中的一个窗口或一个标签页，它包含有关窗口的...

    lightbox在iframe内弹在父窗口上

    在提及的"Lightbox在iframe内弹在父窗口上"的话题中，我们讨论的是如何在嵌入的iframe框架内部触发Lightbox效果时，使其能够跨越iframe边界，直接在父窗口中展示。 Lightbox通常与JavaScript库如jQuery结合使用，...

    iframe跨域调用父窗口js.zip

    在实际应用中，根据项目需求和浏览器兼容性，可以选择合适的方法实现iframe跨域调用父窗口的JavaScript方法。同时，注意安全问题，避免恶意代码通过跨域通信窃取敏感信息。 以上就是关于iframe跨域调用父页面js方法...

    iframe里面的元素触发父窗口元素事件的jquery代码

    那么iframe里面的元素怎样触发父窗口dom1的事件呢？这样吗？ $(dom1, parent.document).trigger(‘topEvent’); 看似正确，实则误导人。 因为父窗口的jquery对象与iframe里面的jquery对象实际为两个对象（function）...

    解决IE,Firefox,chrome,safari浏览器中iframe显示高度自适应问题

    ### 解决IE、Firefox、Chrome、Safari浏览器中iframe显示高度自适应问题 在Web开发中，`iframe`（Inline Frame）元素常被用于嵌入另一个HTML文档到当前页面中，这种技术为开发者提供了极大的便利，例如加载广告、...

    javascript在IE和Firefox中兼容性问题

    在IE中，可以通过`window.frames`或`parent.frames`访问iframe或frame的内容，而在Firefox中，通常使用`contentWindow`或`contentDocument`属性来访问。 4. **设置元素文本内容测试.html** IE支持`innerText`属性...

    主页面实现两个iframe中元素拖动

    在网页设计中，有时我们需要实现跨页面的交互功能，例如在一个主页面中包含两个或多个iframe，让这些iframe中的元素可以被拖动并传递信息。本案例中的"主页面实现两个iframe中元素拖动"就是一个典型的跨iframe交互的...

    子页面访问父页面和跨iframe访问(ie 和火狐)

    在火狐3.016版本中，`postMessage`已经得到支持，但在旧版IE中可能需要额外处理。 3. IE7特有问题： Internet Explorer 7在处理iframe方面有一些特殊性，如对`document.domain`的设置。如果两个页面都设置相同的`...

    iframe和firefox的兼容。

    然而，不同的浏览器对于`iframe`的支持程度和处理方式可能存在差异，尤其是在较早版本的Firefox中，可能会遇到一些兼容性问题。本篇文章将详细探讨`iframe`在Firefox中的兼容性挑战及其解决方案。 1. **Firefox对...

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