Цонхыг хаахаас өмнө Javascript мессеж. JavaScript - Цонхны объект: Цонх нээх, хаах. Үүнийг шалгахын тулд бид юу ашигласан бэ?

Таб хаахад хэрхэн ажиллах талаар надаас хэд хэдэн удаа асуусан. Хэрэглэгч таны сайтыг хаахыг хүсч байна гэж бодъё, тэгвэл та ямар нэгэн попап цонх хийж, асууна: " Чи итгэлтэй байна уу?", эсвэл өөр сайт руу дахин чиглүүлэх. Мэдээжийн хэрэг, эдгээр аргууд нь хэрэглэгчдэд маш их ядаргаатай байдаг тул би ашиглахгүй байхыг зөвлөж байна. Аз болоход, хөтчүүд үүнийг маш муу зохицуулдаг, гэхдээ табыг хаах зарим сонголтууд байсаар байна.

Хэрэглэгчээс асуух боломжтой: " Тэр хуудсыг хаахыг хүсэж байгаа гэдэгтээ итгэлтэй байна уу?". Та энэ таб хаах боловсруулалтыг хэрхэн хэрэгжүүлж болохыг эндээс үзнэ үү:


window.onbeforeunload = function() (
"Хэрэглэгчдэд хэлэх зүйл" буцаана;
}

Энэ код нь Firefox, IE, Chrome дээр ажиллах боловч Opera дээр ажиллахгүй (энэ хөтөч нь татаж авахаас өмнө огт боловсруулдаггүй). Энэ тохиолдолд боловсруулах функц өөрөө зөвхөн мөрийг буцаах боломжтой, өөрөөр хэлбэл тэнд ямар ч дахин чиглүүлэлт ажиллахгүй.

Буцаасан мөр нь Chrome болон IE дээрх баталгаажуулах цонхонд харагдах болно. Энэ мөр Firefox дээр харагдахгүй байна.

"onbeforeunload үйл явдал нь сайтаас нийлүүлсэн текстийг харуулахгүй, зөвхөн стандарт мессежийг харуулах болно" гэсэн тайлбараас харахад эцэст нь, эргэлт буцалтгүй. Үүнтэй холбогдуулан асуудлын түүхийн талаар бага зэрэг бичмээр санагдлаа.

Татаж авахаасаа өмнө ашигласны ачаар хэрэглэгч хадгалаагүй өгөгдөлтэй бол (жишээлбэл, маягтаар бичсэн боловч форум руу мессеж илгээгээгүй) вэб хуудаснаас гарахгүй байхыг олон хүн мэддэг. Үүнийг хийхийн тулд JavaScript-тэй төстэй зүйлийг нэмнэ үү:
window.onbeforeunload = функц (evt) ( var message = "Баримт бичиг "foo" хадгалагдаагүй. Хэрэв та хуудаснаас гарвал өөрчлөлтүүд алга болно."; if (typeof evt == "тодорхойгүй") ( evt = window.event ; ) хэрэв (evt) ( evt.returnValue = мессеж; ) буцах мессеж; )
Үүний дараа, хэрэв хэрэглэгч хуудсыг орхихыг хүсч байвал (ямар нэгэн байдлаар - табыг хааж, хөтчийг бүхэлд нь хааж, хуудсыг дахин ачаалж, хаягийн мөрөнд шинэ хаяг оруулна уу, хавчуурга руу орно уу гэх мэт). баталгаажуулах хүсэлтийг харах бөгөөд хуудаснаас гарахыг цуцалж болно. Өмнө нь шударга бус вэб сайтын зохиогчид энэ цонхыг ашиглан хэрэглэгчийг хууран мэхлэхийг оролдсон бөгөөд жишээлбэл, "Сайттай үргэлжлүүлэн ажиллахын тулд OK дарж, хаахын тулд Цуцлах" гэсэн бичвэрийг ашиглан (үнэндээ товчлуурууд нөгөө талд ажилладаг байсан. эргэн тойронд). Эсвэл бүр "OK дарж 1000 долларын кредит картнаас төлбөрөө баталгаажуулна уу" гэх мэт аймшигтай зүйл.

Дараа нь хөтчүүд илүү ухаалаг болж, хэрэглэгчийг хуурахад илүү хэцүү болгохын тулд туслах текстийг нэмж эхлэв. Жишээлбэл, IE8 үүнийг хэрхэн хийдэг вэ:

Firefox 3 дээр бараг ижил төстэй текст байсан:


Хэрэв та бүгдийг уншвал сайт юу мэдээлсэн, хөтөч юу гэж мэдээлсэн нь тодорхой болно. Гэсэн хэдий ч та хууран мэхлэх боломжтой хэвээр байна.


Энд бид товчлуурууд дээрх үйлдлүүдийн тодорхой тайлбарыг харж байна. Хэрэглэгчийг үлдэхийн тулд "Үлдэх" дээр дарж, гарахын тулд "Үлдэх" дээр дарахад ятгах нь нэлээд хэцүү байдаг. Миний бодлоор шийдэл нь хамгийн тохиромжтой бөгөөд энэ сэдвийг хааж болно. Ерөнхийдөө, бараг бүх харилцах цонхон дээрх нүүргүй OK-г үйлдлийн нэрээр солих ёстой (жишээлбэл, "Файл устгах", "Хайлт", "Мөр нэмэх", "Файл нээх" гэх мэт), Энэ нь та харилцан ярианы текстийг бүрэн хянах боломжтой байсан ч хэрэглэгчийн алдааны тоог бууруулдаг.

641509 алдаатай жүжиг ямар байсан бэ? Firefox 4 ба түүнээс дээш хувилбар дээрх энэхүү баталгаажуулалт дараах байдалтай байна.


Таны харж байгаагаар захиалгат текст бүрмөсөн алга болсон. 4-р хувилбарын хувьд вэбсайт нь хэрэглэгчдэд ямар нэгэн нэмэлт мессеж өгөх эсвэл яагаад хэрэглэгчийг орхихыг хүсэхгүй байгаагаа тайлбарлаж чадахгүй. Хэрэв та нэг цонхонд олон баримт бичигтэй ажиллах интерфейсийг хэрэгжүүлж байгаа бөгөөд тэдгээрийн нэг нь хадгалагдаагүй бол алийг нь тусгайлан хэлж чадна гэж бодъё, гэхдээ Firefox дээр та үүнийг ойлгохгүй байх болно. Магадгүй та үүнийг хадгалахыг хүсэхгүй байгаа бөгөөд хэрэв та мессежийг харсан бол хуудсыг тайван орхих болно, гэхдээ өөрөөр хэлбэл та юу болж байгааг мэдэхгүй байна. Хуудас дотор

Энэ хичээлээр бид цонх нээх, хаах, цонх хаагдсан эсэхийг тодорхойлох, дотоод нэрийг нь авах гэх мэт цонхны объектын янз бүрийн аргуудын талаар суралцах болно.

Цонхны объектын аргууд нь open() , close() , print() , focus() болон blur() юм.

Энэ хэсэгт бид цонхны объектын дараах аргуудыг авч үзэх болно.

  • open() - цонх нээх зориулалттай (tab);
  • close() - цонх хаахад зориулагдсан. Open() аргыг ашиглан нээгдсэн цонхыг хаахад голчлон ашигладаг;
  • print() - цонхны агуулгыг хэвлэх зориулалттай;
  • focus() - фокусыг заасан цонх руу шилжүүлэх зориулалттай;
  • blur() - заасан цонхноос фокусыг арилгахад зориулагдсан.
open() арга. Энэ нь хөтөч дээр шинэ цонх (tab) нээхэд зориулагдсан бөгөөд дараах синтакстай:

Аргын параметрүүд:

  • Эхний параметр нь энэ цонхонд ачаалах шаардлагатай хуудасны URL-г зааж өгдөг. Хэрэв энэ параметрийн утгыг заагаагүй бол цонхонд хоосон хуудас (about: хоосон) гарч ирнэ.
  • Нээлттэй аргын хоёр дахь параметр нь зорилтот атрибутын утга эсвэл цонхны нэрийг тодорхойлдог. Дараах утгуудыг дэмжинэ.
    • _blank - URL нь шинэ цонхонд (таб) ачаалагдсан. Энэ нь анхдагч утга юм;
    • _parent - URL нь эх хүрээ рүү ачаалагдсан. Хэрэв энэ нь байхгүй бол URL нь одоогийн цонхонд (таб) ачаалагдсан болно;
    • _self - URL нь одоогийн цонхонд ачаалагдсан;
    • _top - бүх фреймүүдийг цуцалж, URL-г одоогийн хөтөчийн цонхонд ачаална (таб). Хэрэв энэ нь байхгүй бол URL нь одоогийн цонхонд (таб) ачаалагдсан болно;
    • Мөн параметр болгон нээх цонхны нэрийг зааж өгч болно. Энэ нэр нь дотоод бөгөөд вэб хөгжүүлэгчид энэ цонхны функц, аргуудыг дуудах боломжтой.
  • Гурав дахь параметр нь таслалаар тусгаарлагдсан цонхны шинж чанаруудын багцыг зааж өгөх зорилготой юм. Дараах үндсэн цонхны шинж чанаруудыг дэмждэг:
    • зүүн , дээд - хөтчийн цонхны зүүн дээд булангийн координатууд (пикселээр) дэлгэцийн зүүн дээд булантай харьцуулахад. Эдгээр шинж чанаруудын утга эерэг буюу 0-тэй тэнцүү байх ёстой;
    • Хөтчийн цонхны ажлын талбайн өндөр, өргөн - өндөр, өргөн. Утгыг зааж өгөхдөө хөтөчийн цонхны өргөн ба өндөр нь 100 пикселээс бага байж болохгүй гэдгийг анхаарах хэрэгтэй;
    • resizable нь хөтчийн цонхны хэмжээг өөрчлөх боломжийг идэвхжүүлэх эсвэл идэвхгүй болгох зорилготой Boolean цонхны шинж чанар юм. Энэ шинж чанар нь дараах утгуудыг хүлээн зөвшөөрдөг: тийм эсвэл 1, үгүй ​​эсвэл 0;
    • scrollbars нь хөтчийн цонхны агуулгын хувьд гүйлгэх мөрүүдийг харуулахыг идэвхжүүлэх эсвэл идэвхгүй болгоход ашигладаг Boolean цонхны шинж чанар юм. Энэ шинж чанар нь дараах утгуудыг хүлээн зөвшөөрдөг: тийм эсвэл 1, үгүй ​​эсвэл 0;
    • статус нь хөтчийн статус мөрийг харуулахыг идэвхжүүлэх эсвэл идэвхгүй болгох зорилготой логик цонхны шинж чанар юм. Энэ шинж чанар нь дараах утгуудыг хүлээн зөвшөөрдөг: тийм эсвэл 1, үгүй ​​эсвэл 0.

Дараах жишээнүүдийг авч үзье.

1. Шинэ цонхонд хоосон about:хоосон хуудас нээнэ үү. Энэ цонхны өргөн ба өндөр нь 250px байх ёстой:

Window.open("","","өргөн=250,өндөр=250");

2. Одоогийн цонхонд "http://site/" вэб хуудсыг нээнэ үү:

Window.open("http://site/", "_self");

3. Тодорхой шинж чанартай шинэ цонх нээнэ үү (дээд=100, зүүн=100, өргөн=400, өндөр=500, гүйлгэх мөр=тийм, resizabie=тийм):

Window.open("http://site", "_blank", "дээд=100, зүүн=100, өргөн=400, өндөр=500, гүйлгэх мөр=тийм, хэмжээг өөрчлөх=тийм");

Цонх нээгдсэний дараа түүнтэй хэрхэн харилцах вэ?

Open() арга нь зөвхөн цонх нээхээс гадна энэ цонхны холбоосыг авах боломжийг олгодог. Энэ холбоос нь тодорхой шинж чанар, аргуудыг дуудаж энэ цонхтой харилцах боломжийг олгодог. Тэдгээр. Бид нэг цонхонд байрлах JavaScript кодыг ашиглан өөр цонхыг удирдах боломжтой.

Жишээлбэл, нээлттэй цонхны баримт бичгийн объект руу хандахын тулд:

Хоосон шинэ цонх нээж, дотор нь зарим текстийг харуулна уу:

Var myWindow = window.open("", "", "өргөн=250, өндөр=250"); myWindow.document.write("

Зарим текст

");

Тайлбар: Та зөвхөн нээсэн цонхнуудтай харилцах боломжтой бөгөөд бусад цонхтой ажиллах боломжгүй.

close() арга

Энэ нь цонхыг хаахад зориулагдсан. Энэ арга нь параметргүй. Энэ нь ихэвчлэн open() аргаар үүсгэсэн цонхыг хаахад хэрэглэгддэг. Үгүй бол, та хэрэглэгчийн өөрөө нээсэн цонхыг (tab) хаахыг оролдох үед (JavaScript-ээс биш) хөтөч аюулгүй байдлын үүднээс хэрэглэгчээс энэ үйлдлийг гүйцэтгэхийг баталгаажуулахыг хүсэх болно.

Жишээлбэл, myWindow нэртэй цонхыг нээх, хаах товчлууруудыг үүсгэцгээе:

// нээлттэй цонхны цонхны объектын лавлагааг хадгалах хувьсагч үүсгэх var myWindow; функц myWindowOpen ( myWindow = window.open("http://www.yandex.ru", "myWindow", "өргөн=250, өндөр=250"); ) функц myWindowClose (хэрэв (myWindow) ( myWindow.close() ; myWindow = null; ) ) Цонх нээх Цонхыг хаа

print() арга

Энэ нь цонхны агуулгыг хэвлэх зориулалттай. Энэ арга нь параметргүй.

функц myPrint() ( window.print(); ) Хуудас хэвлэх

фокус() арга

Энэ нь заасан цонхонд анхаарлаа хандуулах зорилготой юм. Энэ арга нь параметргүй.

blur() арга

Энэ нь заасан цонхноос фокусыг арилгах зорилготой, i.e. арын дэвсгэр рүү шилжүүлнэ. Энэ арга нь параметргүй.

функц myWindowOpen() ( var myWindow = window.open("", "", "өргөн=200,өндөр=100"); ) функц myWindowFocus() ( myWindow.focus(); ) функц myWindowBlur() ( myWindow.blur) (; ) Цонхыг нээх Цонх руу анхаарлаа хандуулах Цонхыг дэвсгэр рүү шилжүүлэх

Цонхны объектын шинж чанарууд: нэр, онгойлгогч, хаалттай.

Энэ хэсэгт бид цонхны объектын дараах шинж чанаруудыг авч үзэх болно.

  • нэр - цонхны дотоод нэрийг олж авах эсвэл тохируулах зорилготой;
  • онгойлгогч - одоогийн цонхонд энэ цонх нээгдсэн цонхны (цонхны объект) холбоосыг авах боломжийг танд олгоно;
  • хаалттай нь логикийн шинж чанарыг буцаадаг: цонх хаалттай бол үнэн, нээлттэй бол худал.
өмч хөрөнгийг нэрлэх

Энэ шинж чанарыг цонх нээгдсэний дараа дотоод нэрийг өөрчлөхөд ихэвчлэн ашигладаг. Нэмж дурдахад name шинж чанар нь цонхны дотоод нэрний одоогийн утгыг буцаах боломжтой.

Цонхны дотоод нэр нь нээх ба хаах гарчгийн шошгуудын хооронд хавсаргасан тэмдэгт мөр биш бөгөөд энэ нь хөгжүүлэгчд зориулагдсан цонхны нэр юм. Тэдгээр. Энэ нэр нь хэрэглэгчдэд харагдахгүй.

Энэ нэрийг голчлон хуудас нээх цонхыг зааж өгөхийн тулд гипер холбоос болон маягтуудад ашигладаг. Жишээлбэл, гипер холбоос дээр цонхны дотоод нэрийг зааж өгөхийн тулд зорилтот атрибутыг ашигладаг.Хэрэв a элемент нь target="searchWindow" шинж чанартай бол энэ холбоос дээр дарахад хөтөч эхлээд цонхыг хайж олохыг оролддог. Ийм дотоод нэр (searchWindow), хэрэв ийм дотоод нэртэй цонх байхгүй бол энэ нь шинэ цонх нээгээд searchWindow гэж нэрлэнэ. Хэрэв ижил нэртэй цонх байгаа бол шинэ цонх нээгдэхгүй, гэхдээ энэ цонхонд заасан холбоосыг ашиглан хуудсыг дахин ачаална. Анхдагч байдлаар, хөтчийн цонхнууд дотоод нэргүй байдаг.

Жишээлбэл, "http://www.google.com/" хуудсыг myWindow нэртэй цонхонд нээцгээе:

window.name = "myWindow";

Жишээлбэл, open() аргыг ашиглан цонх нээж, түүний нэрийг харуулъя:

var wnd = window.open("","myTest","өргөн=200, өндөр=300"); wnd.document.write("

Энэ цонх нь: " + wnd.name + ".");

онгойлгох өмч

Энэ өмч нь цонхонд анхны цонхны холбоосыг (цонхны объект) авах боломжийг олгодог. цонх нээгдсэн цонх руу.

Жишээлбэл, танд анхны цонх (1) байгаа бөгөөд та өөр цонх нээхийн тулд open() аргыг ашигладаг (2). Энэ цонхонд (2) та цонхыг (1) авахын тулд нээх шинж чанарыг ашиглаж болно.

функц openMyWindow() ( var myWindow=window.open("","","width=200,height=200"); myWindow.document.write("Нээлттэй цонх (2)"); $(баримт).бэлэн (function() ( updatefgallowPrompt(true); window.onbeforeunload = WarnUser; ) функц WarnUser() ( var allowPrompt = getfgallowPrompt(); if(allowPrompt) ( saveIndexedDataAlert(); буцаах null; ) else ( updatefgallowPrompt(true); үйл явдал); .stopPropagation ) ) функц saveIndexedDataAlert() ( var allowPrompt = getfgallowPrompt(); var lenIndexedDocs = parseInt($("#sortable3 > li").size()) + parseInt($("#sortable3 > ul").size( )); if(allowPrompt && $.trim(lenIndexedDocs) > 0) ( event.returnValue = "Таны мессеж"; } else { event.returnValue = " "; updatefgallowPrompt(true); } } $(document).click(function(event) { $("a").live("click", function() { updatefgallowPrompt(false); }); }); function updatefgallowPrompt (allowPrompt){ //exit msg dfds $("body").data("allowPrompt", allowPrompt); } function getfgallowPrompt(){ return $("body").data("allowPrompt"); }!}

Дараа нь миний төлөө ажилласан;

$(цонх). буулгах(функц(үйл явдал) (хэрэв(үйл явдал.clientY).< 0) { //do whatever you want when closing the window.. } });

Window.onbeforeunload = функц () ( "Та үнэхээр хаахыг хүсч байна уу?"; ); );

Маягтын илгээх үйл явдал зохицуулагч дахь буулгахаас өмнөх үйл явдал зохицуулагч байж магадгүй:

JQuery("маягт").submit(функц() ( jQuery(цонх). unbind("ачаалахаас өмнө"); ... ));

2

Надад нэг эцэг эх, хүүхдийн хуудас бий. хүүхдийн хуудас шинэ таб дээр нээгдэв

Би хүүхдийн табыг хаахдаа нэг анхааруулах мессежийг харуулахыг хүсч байна (хүүхдийн хуудас хаагдана).
Табыг хаах үед хаалттай мессежийг хэрхэн харуулах вэ? (Сэргээх цаг биш)

Би OnUnload болон onbeforeunload ашигласан.
Энэ хоёр аргыг хуудсыг дахин шинэчлэх, табуудыг хаах үед дууддаг.

Window.onunload = функц doUnload(e) ( alert("Хүүхдийн цонх хаагдаж байна..."); )

Window.onbeforeunload = функц doUnload(e) ( alert("Хүүхдийн цонх хаагдаж байна..."); )

Би анхааруулах мессежийг харуулах ёстой, зүгээр л хөтөч дээрх табыг хаа.

Надад туслаач. Урьдчилан баярлалаа.

Би дараах скриптийг ашиглаж байна. Энэ нь IE дээр ажиллаж байсан. Гэхдээ FireFox дээр ажиллаагүй

window.onbeforeunload = function() ( хэрэв ((window.event.clientX< 0) || (window.event.clientY < 0) || (window.event.clientX < -80)) { alert("Child window is closing..."); } };

Үүнийг FireFox болон бусад хөтөч дээр хэрхэн яаж хийх вэ.

  • 4 хариулт
  • Эрэмбэлэх:

    Үйл ажиллагаа

1

Учир нь энэ afaik хэзээ ч хөндлөн хөтөч хувилбар байгаагүй. Шийдэл нь ямар нэгэн чухал зүйлийг илрүүлэхийн тулд баримт бичиггүй, хөтчийн хувьсах онцлогт найдах БИШ.

Та ХҮҮХЭД хуудастай тул та эцэг эх (нээгч) дээр childWindowHandle.closed шинж чанарыг интервалаар шалгаж, үүн дээр ажилладаг тестийг тохируулж болно.

1

Энэ нь зүгээр л Crossbrowser-ыг буулгахаас өмнөх үйл явдлыг асаахыг оролддог гэж үзвэл энэ нь бараг л үүнийг хийдэг (Opera-аас бусад)

Оролдоод үзнэ үү( // http://www.opera.com/support/kb/view/827/ opera.setOverrideHistoryNavigationMode("нийцтэй"); history.navigationMode = "нийцтэй"; )catch(e)() //Бидний хаана F" You Going Message функц нь ReturnMessage() ( "WTF!!!" буцаана; ) //UnBind Function функц UnBindWindow() ( window.onbeforeunload = null; буцаах үнэн; ) //Бид баримт бичигт нөлөөлөхийг хүсэхгүй байгаа холбоосуудыг холбох .getElementById("homebtn").onclick = UnBindWindow; document.getElementById("googlebtn").onclick = UnBindWindow; //Bind Exit Message window.onbeforeunload = ReturnMessage;

0

Та күүки дээр суурилсан зарим аргуудыг эс тооцвол үүнийг хийх боломжгүй байж магадгүй. Хуудсыг шинэчлэх, маягт дээр суурилсан дахин чиглүүлэлт эсвэл урвуу чиглүүлэлт эсвэл хөтчийг хаах үйл явдлыг буулгах хоёр дахь тодорхойлолт нь энгийн бөгөөд уйтгартай биш юм. Үүнээс хамаарахгүй байхыг зөвлөж байна.

Үйлчлүүлэгч табыг хаахаас өмнө та хэдэн жижиг зүйлийг хийж болно. javascript detect browser close tab/close browser , гэхдээ хэрвээ таны үйлдлийн жагсаалт том бөгөөд таб дуусаагүй байхад хаагдах юм бол та арчаагүй болно. Та оролдож болно, гэхдээ миний туршлагаас харахад энэ нь үүнээс хамаардаггүй. Тийм ээ, та одоогоор ялгах, шинэчлэх, хаах боломжгүй. Тиймээс хүүхэд үнэхээр хаалттай эсэхийг тодорхойлох найдвартай арга байхгүй.

Window.addEventListener("foreunload", функц (e) ( var confirmationMessage = "\o/"; /* Энд жижиг үйлдлийн код байна уу */ (e || window.event).returnValue = confirmationMessage; //Gecko + IE буцаах баталгаажуулахMessage; //Webkit, Safari, Chrome ));