欢迎来到福编程网,本站提供各种互联网专业知识!

javascript之可拖动的iframe效果代码

发布时间:2008-08-01 作者: 来源:转载
用javascript实现可拖动的iframe页面效果的js
//HISTORY
//------------------------------------------------------------------
//Jan23,2004:Fixedproblemswhichcausedthescriptnottoworkin
//someframedsituations.Improvedbrowsersupport.
//Addedeasier"addHandle"implentation.
//May25,2003:Addedbettereventpositiondetection,addedcaching
//ofIFRAMEobjectreferencestoavoidlookups.Added
//'move'cursortohandles.
//May24,2003:UpdatedtofixbugwithNetscape7.x
//May23,2003:Created
/*
DESCRIPTION:ThepurposeofthislibraryistoallowIFRAMEobjectstobe
draggedaroundthescreeninthesamewaythatpopupwindowsordraggable
DIVtagsareoftenused.SinceIFRAMEobjectsalwayscoverformobjects,
thismakesanidealsolutionforasimulated"popupwindow"onapagewith
formobjects.

COMPATABILITY:TestedsuccessfullywithIE6.x,Netscape6.2,7.x,and
Mozilla1.3.SincethisscriptusesIFRAMEobjectsandDHTMLheavily,
cross-browsercompatabilityisagoalbuttheremaybesomequirksin
variousbrowserversions.

USAGE:
1)IncludethesourcefileinyourmaindocumentwhichcontainstheIFRAME
tags.Makesureeachiframehasaunique"ID"attribute.Forbestbrowser
compatability,alsoincludea"NAME"attributeintheIFRAMEtagthat
hasthesamevalueasthe"ID"attribute.

2)InthedocumentcontentofeachIFRAMEwhichwillbedraggable,,dotwo
things:
a)Includethedragiframe.jsfileinthesource
b)addthiscodetothetag:
onLoad="addHandle(document.getElementById('toolbar'),window);"
Where'toolbar'istheIDofanelementonthepagewhichshouldbethe'handle'
bywhichtheIFRAMEshouldbedragged(likeatoolbaratthetop).
IfyouwanttheIFRAMEtobedraggablebyclickinganywhereintheIFRAME
document,use:
onLoad="addHandle(document.getElementsByTagName('body').item(0),window);"

NOTE:Thecodewillautomaticallylookupthewindow.parenttreetofinda
parentdocumentwithdraggableiframesenabled.Itwillattachitselftothe
firstdocumentitfinds,allowingittoworkwithinaframedenvironment.

Inyourparentdocument(containingtheIFRAMEs),youmaysetacoupleofoptions:

//SettotruetoalwaysbringtheselectedIFRAMEtothe"top"ofthezIndex.
//Defaultstofalse
bringSelectedIframeToTop(true|false);

//SettotruetoallowIFRAMEobjectstobedraggedoffthescreen.Thismay
//makethehandlebenolongerreachablebythemouse,causingtheIFRAMEto
//bestranded.
//Defaultstofalse
allowDragOffScreen(true|false);

//YoumaymanuallysetthisvariabletodefinethehighestzIndexusedin
//yourmaindocument.ThisisusedtodeterminewhatzIndextogiveanIFRAME
//ifitisselectedand"bringSelectedIframeToTop"issettotrue.
//Defaultsto99.
DIF_highestZIndex=4;

NOTES:
1)Ifyouhavedefinedonmousedownoronmouseupeventhandlersforyour"handle"
objectintheIFRAME,theywillbeover-written.
2)Ifyouhavedefinedanonmousemovehandlerineitherthemaindocumentor
theIFRAMEdocument,theywillbeover-written.
3)All