javascript之可拖动的iframe效果代码


Posted in Javascript onAugust 01, 2008

// HISTORY
// ------------------------------------------------------------------
// Jan 23, 2004: Fixed problems which caused the script not to work in
//               some framed situations. Improved browser support.
//               Added easier "addHandle" implentation.
// May 25, 2003: Added better event position detection, added caching
//               of IFRAME object references to avoid lookups. Added
//               'move' cursor to handles.
// May 24, 2003: Updated to fix bug with Netscape 7.x
// May 23, 2003: Created
/* 
DESCRIPTION: The purpose of this library is to allow IFRAME objects to be
dragged around the screen in the same way that popup windows or draggable
DIV tags are often used. Since IFRAME objects always cover form objects,
this makes an ideal solution for a simulated "popup window" on a page with
form objects.

COMPATABILITY: Tested successfully with IE 6.x, Netscape 6.2, 7.x, and
Mozilla 1.3. Since this script uses IFRAME objects and DHTML heavily, 
cross-browser compatability is a goal but there may be some quirks in 
various browser versions.

USAGE:
1) Include the source file in your main document which contains the IFRAME
   tags. Make sure each iframe has a unique "ID" attribute. For best browser
   compatability, also include a "NAME" attribute in the IFRAME tag that
   has the same value as the "ID" attribute.

2) In the document content of each IFRAME which will be draggable, , do two
    things:
    a) Include the dragiframe.js file in the source
    b) add this code to the <BODY> tag:
   onLoad="addHandle(document.getElementById('toolbar'), window);"
   Where 'toolbar' is the ID of an element on the page which should be the 'handle'
   by which the IFRAME should be dragged (like a toolbar at the top).
   If you want the IFRAME to be draggable by clicking anywhere in the IFRAME
   document, use:
   onLoad="addHandle(document.getElementsByTagName('body').item(0), window);"

   NOTE: The code will automatically look up the window.parent tree to find a
   parent document with draggable iframes enabled. It will attach itself to the
   first document it finds, allowing it to work within a framed environment.

In your parent document (containing the IFRAMEs), you may set a couple of options:

// Set to true to always bring the selected IFRAME to the "top" of the zIndex.
// Defaults to false
bringSelectedIframeToTop(true|false);

// Set to true to allow IFRAME objects to be dragged off the screen. This may
// make the handle be no longer reachable by the mouse, causing the IFRAME to
// be stranded.
// Defaults to false
allowDragOffScreen(true|false);

// You may manually set this variable to define the highest zIndex used in 
// your main document. This is used to determine what zIndex to give an IFRAME
// if it is selected and "bringSelectedIframeToTop" is set to true.
// Defaults to 99.
DIF_highestZIndex=4;

NOTES:
1) If you have defined onmousedown or onmouseup event handlers for your "handle"
   object in the IFRAME, they will be over-written.
2) If you have defined an onmousemove handler in either the main document or
   the IFRAME document, they will be over-written.
3) All <IFRAME> objects must have an ID!
*/ 
// iframe 属性参考 :http://www.phpx.com/man/dhtmlcn/objects/IFRAME.html
// http://www.mattkruse.com/javascript/dragiframe/
// Variables used for "Draggable IFrame" (DIF) functions
var DIF_dragging=false;
var DIF_iframeBeingDragged="";
var DIF_iframeObjects=new Object();
var DIF_iframeWindows=new Object();
var DIF_iframeMouseDownLeft = new Object();
var DIF_iframeMouseDownTop = new Object();
var DIF_pageMouseDownLeft = new Object();
var DIF_pageMouseDownTop = new Object();
var DIF_handles = new Object();
var DIF_highestZIndex=99;
var DIF_raiseSelectedIframe=false;
var DIF_allowDragOffScreen=false;

// Set to true to always raise the dragged iframe to top zIndex
function bringSelectedIframeToTop(val) {
    DIF_raiseSelectedIframe = val;
    }

// Set to try to allow iframes to be dragged off the top/left of the document
function allowDragOffScreen(val) {
    DIF_allowDragOffScreen=val;
    }

// Method to be used by iframe content document to specify what object can be draggable in the window
function addHandle(o, win) {
    if (arguments.length==2 && win==window) {
        // JS is included in the iframe who has a handle, search up the chain to find a parent window that this one is dragged in
        var p = win;
        while (p=p.parent) {
            if (p.addHandle) { p.addHandle(o,win,true); return; }
            if (p==win.top) { return; } // Already reached the top, stop looking
            }
        return; // If it reaches here, there is no parent with the addHandle function defined, so this frame can't be dragged!
        }
    var topRef=win;
    var topRefStr = "window";
    while (topRef.parent && topRef.parent!=window) {
        topRef = topRef.parent;
        topRefStr = topRefStr + ".parent";
        }
    // Add handlers to child window
    if (typeof(win.DIF_mainHandlersAdded)=="undefined" || !win.DIF_mainHandlersAdded) {
        // This is done in a funky way to make Netscape happy
        with (win) { 
            eval("function OnMouseDownHandler(evt) { if(typeof(evt)=='undefined'){evt=event;}"+topRefStr+".parent.DIF_begindrag(evt, "+topRefStr+") }");
            eval("document.onmousedown = OnMouseDownHandler;");
            eval("function OnMouseUpHandler(evt) { if(typeof(evt)=='undefined'){evt=event;}"+topRefStr+".parent.DIF_enddrag(evt, "+topRefStr+") }");
            eval("document.onmouseup = OnMouseUpHandler;");
            eval("function OnMouseMoveHandler(evt) { if(typeof(evt)=='undefined'){evt=event;}"+topRefStr+".parent.DIF_iframemove(evt, "+topRefStr+") }");
            eval("document.onmousemove = OnMouseMoveHandler;");
            win.DIF_handlersAdded = true;
            win.DIF_mainHandlersAdded = true;
            }
        }
    // Add handler to this window
    if (typeof(window.DIF_handlersAdded)!="undefined" || !window.DIF_handlersAdded) {
        eval("function OnMouseMoveHandler(evt) { if(typeof(evt)=='undefined'){evt=event;}DIF_mouseMove(evt, window) }");
        eval("document.onmousemove = OnMouseMoveHandler;");
        window.DIF_handlersAdded=true;
        }
    o.style.cursor="";
    var name = DIF_getIframeId(topRef);
    if (DIF_handles[name]==null) {
        // Initialize relative positions for mouse down events
        DIF_handles[name] = new Array();
        DIF_iframeMouseDownLeft[name] = 0;
        DIF_iframeMouseDownTop[name] = 0;
        DIF_pageMouseDownLeft[name] = 0;
        DIF_pageMouseDownTop[name] = 0;
        }
    DIF_handles[name][DIF_handles[name].length] = o;
    }

// Generalized function to get position of an event (like mousedown, mousemove, etc)
function DIF_getEventPosition(evt) {
    var pos=new Object();
    pos.x=0;
    pos.y=0;
    if (!evt) {
        evt = window.event;
        }
    if (typeof(evt.pageX) == 'number') {
        pos.x = evt.pageX;
        pos.y = evt.pageY;
    }
    else {
        pos.x = evt.clientX;
        pos.y = evt.clientY;
        if (!top.opera) {
            if ((!window.document.compatMode) || (window.document.compatMode == 'BackCompat')) {
                pos.x += window.document.body.scrollLeft;
                pos.y += window.document.body.scrollTop;
            }
            else {
                pos.x += window.document.documentElement.scrollLeft;
                pos.y += window.document.documentElement.scrollTop;
            }
        }
    }
    return pos;
}

// Gets the ID of a frame given a reference to a window object.
// Also stores a reference to the IFRAME object and it's window object
function DIF_getIframeId(win) {
    // Loop through the window's IFRAME objects looking for a matching window object
    var iframes = document.getElementsByTagName("IFRAME");
    for (var i=0; i<iframes.length; i++) {
        var o = iframes.item(i);
        var w = null;
        if (o.contentWindow) {
            // For IE5.5 and IE6
            w = o.contentWindow;
            }
        else if (window.frames && window.frames[o.id].window) {
            w = window.frames[o.id];
            }
        if (w == win) {
            DIF_iframeWindows[o.id] = win;
            DIF_iframeObjects[o.id] = o;
            return o.id; 
            }
        }
    return null;
    }

// Gets the page x, y coordinates of the iframe (or any object)
function DIF_getObjectXY(o) {
    var res = new Object();
    res.x=0; res.y=0;
    if (o != null) {
        res.x = o.style.left.substring(0,o.style.left.indexOf("px"));
        res.y = o.style.top.substring(0,o.style.top.indexOf("px"));
        }
    return res;
    }

// Function to get the src element clicked for non-IE browsers
function getSrcElement(e) {
    var tgt = e.target;
    while (tgt.nodeType != 1) { tgt = tgt.parentNode; }
    return tgt;
    }

// Check if object clicked is a 'handle' - walk up the node tree if required
function isHandleClicked(handle, objectClicked) {
    if (handle==objectClicked) { return true; }
    while (objectClicked.parentNode != null) {
        if (objectClicked==handle) {
            return true;
            }
        objectClicked = objectClicked.parentNode;
        }
    return false;
    }

// Called when user clicks an iframe that has a handle in it to begin dragging
function DIF_begindrag(e, win) {
    // Get the IFRAME ID that was clicked on
    var iframename = DIF_getIframeId(win);
    if (iframename==null) { return; }
    // Make sure that this IFRAME has a handle and that the handle was clicked
    if (DIF_handles[iframename]==null || DIF_handles[iframename].length<1) {
        return;
        }
    var isHandle = false;
    var t = e.srcElement || getSrcElement(e);
    for (var i=0; i<DIF_handles[iframename].length; i++) {
        if (isHandleClicked(DIF_handles[iframename][i],t)) {
            isHandle=true;
            break;
            }
        }
    if (!isHandle) { return false; }
    DIF_iframeBeingDragged = iframename;
    if (DIF_raiseSelectedIframe) {
        DIF_iframeObjects[DIF_iframeBeingDragged].style.zIndex=DIF_highestZIndex++;
        }
    DIF_dragging=true;
    var pos=DIF_getEventPosition(e);
    DIF_iframeMouseDownLeft[DIF_iframeBeingDragged] = pos.x;
    DIF_iframeMouseDownTop[DIF_iframeBeingDragged] = pos.y;
    var o = DIF_getObjectXY(DIF_iframeObjects[DIF_iframeBeingDragged]);
    DIF_pageMouseDownLeft[DIF_iframeBeingDragged] = o.x - 0 + pos.x;
    DIF_pageMouseDownTop[DIF_iframeBeingDragged] = o.y -0 + pos.y;
    }

// Called when mouse button is released after dragging an iframe
function DIF_enddrag(e) {
    DIF_dragging=false;
    DIF_iframeBeingDragged="";
    }

// Called when mouse moves in the main window
function DIF_mouseMove(e) {
    if (DIF_dragging) {
        var pos = DIF_getEventPosition(e);
        DIF_drag(pos.x - DIF_pageMouseDownLeft[DIF_iframeBeingDragged] , pos.y - DIF_pageMouseDownTop[DIF_iframeBeingDragged]);
        }
    }

// Called when mouse moves in the IFRAME window
function DIF_iframemove(e) {
    if (DIF_dragging) {
        var pos = DIF_getEventPosition(e);
        DIF_drag(pos.x - DIF_iframeMouseDownLeft[DIF_iframeBeingDragged] , pos.y - DIF_iframeMouseDownTop[DIF_iframeBeingDragged]);
        }
    }

// Function which actually moves of the iframe object on the screen
function DIF_drag(x,y) {
    var o = DIF_getObjectXY(DIF_iframeObjects[DIF_iframeBeingDragged]);
    // Don't drag it off the top or left of the screen?
    var newPositionX = o.x-0+x;
    var newPositionY = o.y-0+y;
    if (!DIF_allowDragOffScreen) {
        if (newPositionX < 0) { newPositionX=0; }
        if (newPositionY < 0) { newPositionY=0; }
        }
    DIF_iframeObjects[DIF_iframeBeingDragged].style.left = newPositionX + "px";
    DIF_iframeObjects[DIF_iframeBeingDragged].style.top  = newPositionY + "px";
    DIF_pageMouseDownLeft[DIF_iframeBeingDragged] += x;
    DIF_pageMouseDownTop[DIF_iframeBeingDragged] += y;
    }
在线演示http://img.3water.com/online/IFRAMEWindows/index.html
打包下载javascript之可拖动的iframe效果代码IFRAMEWindows.rar

Javascript 相关文章推荐
jQuery打印指定区域Html页面并自动分页
Jul 04 Javascript
介绍JavaScript的一个微型模版
Jun 24 Javascript
JS实现的不规则TAB选项卡效果代码
Sep 18 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
Nov 04 Javascript
jquery实现加载进度条提示效果
Nov 23 Javascript
jQuery通过写入cookie实现更换网页背景的方法
Apr 15 Javascript
js自定义select下拉框美化特效
May 12 Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
Jan 01 Javascript
angular.js+node.js实现下载图片处理详解
Mar 31 Javascript
angular.js中解决跨域问题的三种方式
Jul 12 Javascript
详解Vue2 SSR 缓存 Api 数据
Nov 20 Javascript
layui实现显示数据表格、搜索和修改功能示例
Jun 03 Javascript
javascript 单选框,多选框美化代码
Aug 01 #Javascript
javascript网页关键字高亮代码
Jul 30 #Javascript
用js生产批量批处理执行命令
Jul 28 #Javascript
javascript+xml技术实现分页浏览
Jul 27 #Javascript
用JS操作FRAME中的IFRAME及其内容的实现代码
Jul 26 #Javascript
发一个自己用JS写的实用看图工具实现代码
Jul 26 #Javascript
对JavaScript的eval()中使用函数的进一步讨论
Jul 26 #Javascript
You might like
一些花式咖啡的配方
2021/03/03 冲泡冲煮
php封装的smarty类完整实例
2016/10/19 PHP
PHP中in_array的隐式转换的解决方法
2018/03/06 PHP
php链式操作的实现方式分析
2019/08/12 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
javascript 冒泡排序 正序和倒序实现代码
2010/12/14 Javascript
js获取鼠标点击的位置实现思路及代码
2014/05/09 Javascript
AngularJS表单编辑提交功能实例
2015/02/13 Javascript
JS实现向表格行添加新单元格的方法
2015/03/30 Javascript
JavaScript中exec函数用法实例分析
2015/06/08 Javascript
JavaScript获取各大浏览器信息图示
2015/11/20 Javascript
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
2015/12/31 Javascript
javascript鼠标右键菜单自定义效果
2020/12/08 Javascript
JavaScript实现复制文章自动添加版权
2016/08/02 Javascript
轻松掌握JavaScript代理模式
2016/08/26 Javascript
微信小程序canvas实现刮刮乐效果
2018/07/09 Javascript
JS实现的全选、全不选及反选功能【案例】
2019/02/19 Javascript
vue 解决遍历对象显示的顺序不对问题
2019/11/07 Javascript
零基础写python爬虫之爬虫编写全记录
2014/11/06 Python
Python 多线程Threading初学教程
2017/08/22 Python
使用python3调用wxpy模块监控linux日志并定时发送消息给群组或好友
2019/06/05 Python
Selenium+Python 自动化操控登录界面实例(有简单验证码图片校验)
2019/06/28 Python
python使用多线程编写tcp客户端程序
2019/09/02 Python
Django实现文件上传下载功能
2019/10/06 Python
CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码
2020/11/30 HTML / CSS
印度尼西亚值得信赖的第一家网店:Bhinneka
2018/07/16 全球购物
Muziker英国:中欧最大的音乐家商店
2020/02/05 全球购物
SHEIN美国:购买时髦的女性服装
2020/12/02 全球购物
英语专业毕业个人求职自荐信
2013/09/21 职场文书
测绘专业大学生职业生涯规划书
2014/02/10 职场文书
募捐倡议书
2014/04/14 职场文书
留学推荐信范文
2014/05/10 职场文书
早读课迟到检讨书
2014/09/25 职场文书
挂职个人工作总结
2015/03/05 职场文书
新学期感想
2015/08/10 职场文书
2016年小学党支部创先争优活动总结
2016/04/05 职场文书