Задача: Создание нестандартного (custom-ного) окна браузера
Исходник: chromeless_windows основной код, язык: javascript [code #121, hits: 9997]
автор: - [добавлен: 15.05.2006]
  1. // chromeless windows v2.1
  2. // www.microbians.com / Gabriel Suchowolski power[z]one - powerz@microbians.com
  3. //
  4. // Distributed under the terms of the GNU Library General Public License
  5. //
  6. // - Chromeless trick by webFX. http://www.eae.net/webfx/
  7. // - Chromeless mouse control to handled like a normal window by Gabriel Suchowolski power[z]one
  8.  
  9. function openchromeless(theURL, wname, W, H, windowCERRARa, windowCERRARd, windowCERRARo, windowNONEgrf, windowCLOCK, windowTIT, windowREALtit , windowBORDERCOLOR, windowBORDERCOLORsel, windowTITBGCOLOR, windowTITBGCOLORsel) {
  10.  
  11. var windowW = W;
  12. var windowH = H;
  13. var windowX = Math.ceil( (window.screen.width - windowW) / 2 );
  14. var windowY = Math.ceil( (window.screen.height - windowH) / 2 );
  15.  
  16. if (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion)>=4) isie=true
  17. else isie=false
  18.  
  19. if (isie) { H=H+20+2; W=W+2; }
  20.  
  21. s = ",width="+W+",height="+H;
  22.  
  23. if (isie && (navigator.userAgent.toLowerCase().indexOf("win")!=-1) ) {
  24.  
  25. var dowin = theURL != "" ? true : false;
  26.  
  27. var chromeTIThtml = '\n' +
  28. '<html> '+ '\n'+
  29. '<head> '+ '\n'+
  30. '<title>&nbsp;CHROMELESS WINDOWS / TITLEBAR</title> '+ '\n'+
  31. '<style type="text/css"> '+ '\n'+
  32. '#mywindowTITLE { position: absolute; left: 0px; top: 0px; width: 100%; height: 22px; z-index: 1; background-color: '+windowTITBGCOLOR+'; clip:rect(0,100%,22,0); } '+ '\n'+
  33. '#mywindow { position: absolute; left: 0px; top: 0px; width: 100%; height: 22px; z-index: 2; clip:rect(0,100%;22,0); } '+ '\n'+
  34. '#mywindowCLOSE { position: absolute; left: -22px; top: -22px; width: 11px; height: 11px; z-index: 3; clip:rect(0,11,11,0); } '+ '\n'+
  35. '#mywindowCLOCK { position: absolute; left: -22px; top: -22px; width: 11px; height: 11px; z-index: 3; clip:rect(0,11,11,0); } '+ '\n'+
  36. '</style> '+ '\n'+
  37. '<script language="javascript"> '+ '\n'
  38.  
  39. if ( theURL != "" ) {
  40.  
  41. chromeTIThtml = chromeTIThtml +
  42. ' theURL = "'+theURL +'" '+ '\n'+
  43. ' windowCERRARa = "'+windowCERRARa +'" '+ '\n'+
  44. ' windowCERRARd = "'+windowCERRARd +'" '+ '\n'+
  45. ' windowCERRARo = "'+windowCERRARo +'" '+ '\n'+
  46. ' windowCLOCK = "'+windowCLOCK +'" '+ '\n'+
  47. ' windowBORDERCOLOR = "'+windowBORDERCOLOR +'" '+ '\n'+
  48. ' windowBORDERCOLORsel= "'+windowBORDERCOLORsel +'" '+ '\n'+
  49. ' windowTITBGCOLOR = "'+windowTITBGCOLOR +'" '+ '\n'+
  50. ' windowTITBGCOLORsel = "'+windowTITBGCOLORsel +'" '+ '\n'
  51.  
  52. } else {
  53.  
  54. chromeTIThtml = chromeTIThtml +
  55. ' theURL="about:blank" '+ '\n'+
  56. ' windowCERRARa = "img/close_a.gif" '+ '\n'+
  57. ' windowCERRARd = "img/close_d.gif" '+ '\n'+
  58. ' windowCERRARo = "img/close_o.gif" '+ '\n'+
  59. ' windowCLOCK = "img/clock.gif" '+ '\n'+
  60. ' windowTIT = "<font face=verdana size=1>&nbsp;ќ window title</font>" '+ '\n'+
  61. ' windowBORDERCOLOR = "#000000" '+ '\n'+
  62. ' windowBORDERCOLORsel = "#FF8A00" '+ '\n'+
  63. ' windowTITBGCOLOR = "#d7dcd9" '+ '\n'+
  64. ' windowTITBGCOLORsel = "#ffffff" '+ '\n'
  65.  
  66. }
  67.  
  68. chromeTIThtml = chromeTIThtml +
  69. 'var windowCERRARImg_a = new Image(); windowCERRARImg_a.src = windowCERRARa; '+ '\n'+
  70. 'var windowCERRARImg_d = new Image(); windowCERRARImg_d.src = windowCERRARd; '+ '\n'+
  71. 'var windowCERRARImg_o = new Image(); windowCERRARImg_o.src = windowCERRARo; '+ '\n'+
  72. 'var windowCLOCKImg = new Image(); windowCLOCKImg.src = windowCLOCK; '+ '\n'+
  73. ' '+ '\n'+
  74. 'function mouseSTATUS() { '+ '\n'+
  75. ' this.x = null; '+ '\n'+
  76. ' this.y = null; '+ '\n'+
  77. ' this.bt = "up"; '+ '\n'+
  78. ' this.oldx = null; '+ '\n'+
  79. ' this.oldy = null; '+ '\n'+
  80. ' this.dx = null; '+ '\n'+
  81. ' this.dy = null; '+ '\n'+
  82. ' this.screeny = null; '+ '\n'+
  83. ' this.screenx = null; '+ '\n'+
  84. ' '+ '\n'+
  85. ' this.element = null; '+ '\n'+
  86. ' this.event = null; '+ '\n'+
  87. '} '+ '\n'+
  88. ' '+ '\n'+
  89. 'var mouse = new mouseSTATUS(); '+ '\n'+
  90. ' '+ '\n'+
  91. 'function actualizateMouseSTATUS(e) { '+ '\n'+
  92. ' if (!e) var e = event '+ '\n'+
  93. ' if ( (e.type=="mousedown" || e.type=="mouseup") && e.button!=1) return true '+ '\n'+
  94. ' '+ '\n'+
  95. ' var x=e.x+document.body.scrollLeft '+ '\n'+
  96. ' var y=e.y+document.body.scrollTop '+ '\n'+
  97. ' '+ '\n'+
  98. ' mouse.x = x; '+ '\n'+
  99. ' mouse.y = y; '+ '\n'+
  100. ' '+ '\n'+
  101. ' if ( e.type == "mousedown" ) mouse.bt = "down"; '+ '\n'+
  102. ' else if ( e.type == "mouseup" ) mouse.bt = "up"; '+ '\n'+
  103. ' '+ '\n'+
  104. ' if (window.event) { '+ '\n'+
  105. ' mouse.screenx=window.event.screenX; '+ '\n'+
  106. ' mouse.screeny=window.event.screenY; '+ '\n'+
  107. ' } else { '+ '\n'+
  108. ' mouse.screenx=-1; '+ '\n'+
  109. ' mouse.screeny=-1; '+ '\n'+
  110. ' } '+ '\n'+
  111. ' '+ '\n'+
  112. '} '+ '\n'+
  113. ' '+ '\n'+
  114. ' '+ '\n'+
  115. 'function initMouseEvents() { '+ '\n'+
  116. ' document.onmousedown = actualizateMouseSTATUS '+ '\n'+
  117. ' document.onmousemove = actualizateMouseSTATUS '+ '\n'+
  118. ' document.onmouseup = actualizateMouseSTATUS '+ '\n'+
  119. ' document.onselectstart = selectstart '+ '\n'+
  120. ' document.ondragstart = new Function("actualizateMouseSTATUS(event); return false;") '+ '\n'+
  121. '} '+ '\n'+
  122. ' '+ '\n'+
  123. 'function selectstart(){ '+ '\n'+
  124. ' if ( event.srcElement.tagName != "INPUT" && event.srcElement.tagName != "TEXTAREA") { return false; } '+ '\n'+
  125. ' else { mouse.bt="up"; return true; } '+ '\n'+
  126. '} '+ '\n'+
  127. ' '+ '\n'+
  128. 'initMouseEvents() '+ '\n'+
  129. ' '+ '\n'+
  130. 'var mywindowbt ="up"; '+ '\n'+
  131. 'var wincloseSTATUS="up"; '+ '\n'+
  132. ' '+ '\n'+
  133. 'var ofx=0; '+ '\n'+
  134. 'var ofy=0; '+ '\n'+
  135. 'var opx=0; '+ '\n'+
  136. 'var opy=0; '+ '\n'+
  137. 'var px=0; '+ '\n'+
  138. 'var py=0; '+ '\n'+
  139. ' '+ '\n'+
  140. 'var wcpx1=-1, wcpy1=-1; '+ '\n'+
  141. 'var wcpx2=-1, wcpy2=-1; '+ '\n'+
  142. ' '+ '\n'+
  143. 'var wclosechanged = false; '+ '\n'+
  144. ' '+ '\n'+
  145. 'function initToMoveWin() { '+ '\n'+
  146. ' if (wincloseSTATUS=="up" && ( mywindowbt=="up" || mywindowbt=="over") ) { '+ '\n'+
  147. ' '+ '\n'+
  148. ' if ( parent.mainloaded ) document.all["mywindowCLOCK"].style.visibility = "hidden"; '+ '\n'+
  149. ' '+ '\n'+
  150. ' document.all["mywindowCLOCK"].style.pixelLeft=document.body.clientWidth-36 '+ '\n'+
  151. ' document.all["mywindowCLOCK"].style.pixelTop =4 '+ '\n'+
  152. ' '+ '\n'+
  153. ' wcpx1 = document.all["mywindowCLOSE"].style.pixelLeft=document.body.clientWidth-18 '+ '\n'+
  154. ' wcpy1 = document.all["mywindowCLOSE"].style.pixelTop =4 '+ '\n'+
  155. ' wcpx2 = wcpx1 + 11 - 1 '+ '\n'+
  156. ' wcpy2 = wcpy1 + 11 - 1 '+ '\n'+
  157. ' if ( mouse.x >= wcpx1 && mouse.x <= wcpx2 && mouse.y >= wcpy1 && mouse.y <= wcpy2) { '+ '\n'+
  158. ' if (wclosechanged == false) { '+ '\n'+
  159. ' document.all["mywindowCLOSE"].document.images["closewin"].src=windowCERRARImg_o.src '+ '\n'+
  160. ' wclosechanged = true '+ '\n'+
  161. ' } '+ '\n'+
  162. ' '+ '\n'+
  163. ' } else if (wclosechanged == true) { '+ '\n'+
  164. ' document.all["mywindowCLOSE"].document.images["closewin"].src=windowCERRARImg_d.src '+ '\n'+
  165. ' wclosechanged = false '+ '\n'+
  166. ' } '+ '\n'+
  167. ' } '+ '\n'+
  168. ' '+ '\n'+
  169. ' if ( mouse.y <= 22 && mouse.y >= 1 && mywindowbt == "up" && mouse.bt =="up" ) { mywindowbt = "over" } '+ '\n'+
  170. ' else if ( ( mouse.y > 22 || mouse.y < 1 ) && mywindowbt == "over" && mouse.bt =="up" ) { mywindowbt = "up" } '+ '\n'+
  171. ' else if ( mouse.y <= 22 && mouse.y >= 1 && mywindowbt == "over" && mouse.bt == "down" ) { '+ '\n'+
  172. ' self.window.focus(); '+ '\n'+
  173. ' '+ '\n'+
  174. ' if ( mouse.x >= wcpx1 && mouse.x <= wcpx2 && mouse.y >= wcpy1 && mouse.y <= wcpy2 ) { '+ '\n'+
  175. ' wincloseSTATUS="down" '+ '\n'+
  176. ' document.all["mywindowCLOSE"].document.images["closewin"].src=windowCERRARImg_a.src '+ '\n'+
  177. ' } else { '+ '\n'+
  178. ' document.all["mywindowTITLE"].style.backgroundColor = windowTITBGCOLORsel '+ '\n'+
  179. ' document.body.style.borderColor = windowBORDERCOLORsel '+ '\n'+
  180. ' parent.chromewinb.document.bgColor = windowBORDERCOLORsel '+ '\n'+
  181. ' parent.chromewinl.document.bgColor = windowBORDERCOLORsel '+ '\n'+
  182. ' parent.chromewinr.document.bgColor = windowBORDERCOLORsel '+ '\n'+
  183. ' ofx = mouse.x; '+ '\n'+
  184. ' ofy = mouse.y; '+ '\n'+
  185. ' opx = mouse.x; '+ '\n'+
  186. ' opy = mouse.y; '+ '\n'+
  187. ' } '+ '\n'+
  188. ' mywindowbt="down"; '+ '\n'+
  189. ' } '+ '\n'+
  190. ' else if ( mouse.bt =="up" && mywindowbt == "down" ) { '+ '\n'+
  191. ' mywindowbt="up"; '+ '\n'+
  192. ' ofx=0; '+ '\n'+
  193. ' ofy=0; '+ '\n'+
  194. ' opx=0; '+ '\n'+
  195. ' opy=0; '+ '\n'+
  196. ' '+ '\n'+
  197. ' if ( mouse.x >= wcpx1 && mouse.x <= wcpx2 && mouse.y >= wcpy1 && mouse.y <= wcpy2 && wincloseSTATUS=="down" ) { top.window.close() } '+ '\n'+
  198. ' '+ '\n'+
  199. ' wincloseSTATUS="up" '+ '\n'+
  200. ' '+ '\n'+
  201. ' if ( document.all["mywindowTITLE"] ) { '+ '\n'+
  202. ' document.all["mywindowTITLE"].style.backgroundColor = windowTITBGCOLOR '+ '\n'+
  203. ' document.body.style.borderColor = windowBORDERCOLOR '+ '\n'+
  204. ' parent.chromewinb.document.bgColor= windowBORDERCOLOR '+ '\n'+
  205. ' parent.chromewinl.document.bgColor= windowBORDERCOLOR '+ '\n'+
  206. ' parent.chromewinr.document.bgColor= windowBORDERCOLOR '+ '\n'+
  207. ' } '+ '\n'+
  208. ' '+ '\n'+
  209. ' } '+ '\n'+
  210. ' else if ( mywindowbt == "down" && wincloseSTATUS == "up") { '+ '\n'+
  211. ' var m_scrx = mouse.screenx; '+ '\n'+
  212. ' var m_scry = mouse.screeny; '+ '\n'+
  213. ' opx = px + ofx - m_scrx; '+ '\n'+
  214. ' opy = py + ofy - m_scry; '+ '\n'+
  215. ' px = m_scrx - ofx; '+ '\n'+
  216. ' py = m_scry - ofy; '+ '\n'+
  217. ' top.window.moveTo(px , py); '+ '\n'+
  218. ' } '+ '\n'+
  219. ' setTimeout("initToMoveWin()",50); '+ '\n'+
  220. '} '+ '\n'+
  221. '</script> '+ '\n'+
  222. '</head> '+ '\n'+
  223. '<body TOPMARGIN=0 LEFTMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 scroll=no style="border: 1px solid '+ windowBORDERCOLOR +'; overflow: hidden; margin: 0pt;" bgcolor='+windowTITBGCOLOR+'> '+ '\n'+
  224. '<div id=mywindow><img src="'+windowNONEgrf+'" width=100% height=20></div> '+ '\n'+
  225. '<div id=mywindowTITLE>'+ '<table width=100% height=20 border=0 cellpadding=0 cellspacing=0><tr><td valign=middle align=left>'+windowTIT+'</td></tr></table>' +'</div> '+ '\n'+
  226. '<div id=mywindowCLOSE><img name=closewin src="'+ windowCERRARd +'" border=0 width=11 height=11></div> '+ '\n'+
  227. '<div id=mywindowCLOCK><img name=clockwin src="'+ windowCLOCK +'" border=0 width=11 height=11></div> '+ '\n'+
  228. '</body> '+ '\n'+
  229. '<script>initToMoveWin();</script> '+ '\n'+
  230. '</html> '+ '\n'
  231.  
  232. var chromeFRMhtml = '' +
  233. '<HTML> '+ '\n'+
  234. '<HEAD> '+ '\n'+
  235. '<TITLE>'+ windowREALtit +'</TITLE> '+ '\n'+
  236. '</HEAD> '+ '\n'+
  237. '<script> '+ '\n'+
  238. 'mainloaded = false '+ '\n'+
  239. 'function generatetitle() { '+ '\n'+
  240. ' if( window.frames["chromewint"] && window.frames["chromewinl"] && window.frames["chromewinb"] && window.frames["chromewinr"] ) { '+ '\n'+
  241. ' chromewint.document.open(); '+ '\n'+
  242. ' chromewint.document.write( "'+ quitasaltolinea(chromeTIThtml) +'" ); '+ '\n'+
  243. ' chromewint.document.close(); '+ '\n'+
  244. ' chromewinl.document.bgColor="'+ windowBORDERCOLOR +'" '+ '\n'+
  245. ' chromewinb.document.bgColor="'+ windowBORDERCOLOR +'" '+ '\n'+
  246. ' chromewinr.document.bgColor="'+ windowBORDERCOLOR +'" '+ '\n'+
  247. ' } else { '+ '\n'+
  248. ' setTimeout("generatetitle()",200) '+ '\n'+
  249. ' } '+ '\n'+
  250. '} '+ '\n'+
  251. 'generatetitle() '+ '\n'+
  252. '</script> '+ '\n'+
  253. '<frameset border=0 framespacing=0 frameborder=0 rows="22,100%,1" onload="mainloaded=true" onreadystatechange="generatetitle()"> '+ '\n'+
  254. ' <frame name=chromewint src="about:blank" scrolling=no noresize> '+ '\n'+
  255. ' <frameset border=0 framespacing=0 frameborder=0 cols="1,100%,1"> '+ '\n'+
  256. ' <frame name=chromewinl src="about:blank" scrolling=no noresize> '+ '\n'+
  257. ' <frame name=main src="'+theURL+'"> '+ '\n'+
  258. ' <frame name=chromewinr src="about:blank" scrolling=no noresize> '+ '\n'+
  259. ' </frameset> '+ '\n'+
  260. ' <frame name=chromewinb src="about:blank" scrolling=no noresize> '+ '\n'+
  261. '</frameset> '+ '\n'+
  262. '</HTML> '
  263.  
  264. splashWin = window.open( "" , wname, "fullscreen=1,toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0"+s);
  265.  
  266. splashWin.resizeTo( Math.ceil( W ) , Math.ceil( H ) );
  267. splashWin.moveTo ( Math.ceil( windowX ) , Math.ceil( windowY ) );
  268.  
  269. splashWin.document.open();
  270. splashWin.document.write( chromeFRMhtml );
  271. splashWin.document.close();
  272.  
  273. }
  274. else {
  275. var splashWin = window.open(theURL, wname, "toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=1"+s, true);
  276. }
  277.  
  278. splashWin.focus();
  279. }
  280.  
  281. function quitasaltolinea(txt) {
  282.  
  283. var salida = txt.toString()
  284. var re = /\\/g; var salida = salida.replace(re, "\\\\");
  285. var re = /\//g; var salida = salida.replace(re, "\\\/");
  286. var re = /\"/g; var salida = salida.replace(re, "\\\"");
  287. var re = /\'/g; var salida = salida.replace(re, "\\\'");
  288. var re = /\n/g; var salida = salida.replace(re, "\\n");
  289. var re = / /g; var salida = salida.replace(re, "");
  290. var re = /\t/g; var salida = salida.replace(re, "");
  291. var re = /\r/g; var salida = salida.replace(re, "");
  292.  
  293. return salida
  294.  
  295. }
  296.  
Данный код как правило размещается во вложенном файле.
Пример вызова со станицы: <a href="/source/122/" class=link>source #122</a>

Автор: Gabriel Suchowolski
Источник: www.microbians.com
Браузеры, поддерживающие скрипт: NN, IE4+, NN6
Тестировалось на: IE 6.0 SP2, Mozilla FF 1.5, Opera 8.5

+добавить реализацию