Η μαύρη τρύπα του scripting

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Η μαύρη τρύπα του scripting

Δημοσίευση από skeftomilos » 23 Ιούλ 2005 15:22

Μια σελίδα φεύγει, μια νέα σελίδα έρχεται. Τι συμβαίνει στο ενδιάμεσο; Πότε σταματά να εκτελείται ο κώδικας μιας σελίδας; Ok, λίγο πομπώδης ο τίτλος του θέματος, αλλά νομίζω ότι λίγοι webmasters θα μπορούσαν να δώσουν απάντηση στο συγκεκριμένο ερώτημα. Προσωπικά είχα μια εντελώς θολή ιδέα για το τι συμβαίνει όταν γίνεται refresh ή submit σε μία σελίδα, και αποφάσισα ότι ήταν καιρός να ξεκαθαρίσει το ζήτημα. Ας ξεκινήσουμε με ένα αθώο quiz. Στο πάτημα του παρακάτω κουμπιού θα εκτελεστεί το alert;

Κώδικας: Επιλογή όλων

<button onClick="location.reload&#40;&#41;;alert&#40;'tsa!'&#41;">Refresh</button>
Στο συμβάν click υπάρχουν δύο εντολές. Η πρώτη προκαλεί ανανέωση (refresh) της σελίδας. Η δεύτερη εμφανίζει ένα μήνυμα. Ο browser θα ξεκινήσει αμέσως με το φόρτωμα της σελίδας ή θα περιμένει πρώτα τον χρήστη να κλείσει το παραθυράκι; Ή μήπως το alert δε θα εμφανιστεί καθόλου;

ΑΠΑΝΤΗΣΗ: Ο Internet Explorer ανανεώνει τη σελίδα χωρίς να περιμένει το κλείσιμο του alert. Αντίθετα ο Opera περιμένει πρώτα να κλείσει το παράθυρο. Τέλος ο Firefox φαίνεται να μπερδεύεται για λίγο, και τελικά κάνει crash!

Κάτι πιο συνηθισμένο. Έστω το παρακάτω link. Quiz: το alert θα εμφανιστεί πριν ή μετά την εμφάνιση της νέας σελίδας;

Κώδικας: Επιλογή όλων

<a href="tsa.htm" onClick="alert&#40;'tsa!'&#41;">Link</a>
ΑΠΑΝΤΗΣΗ: Τίποτα το παράξενο εδώ, το μήνυμα εμφανίζεται πάντα πριν την αλλαγή της σελίδας.

Πάμε τώρα στα δύσκολα. Πρόσφατα χρειάστηκε να φτιάξω μία web εφαρμογή για τη διαχείρηση ενός φακέλου με εικόνες.

Εικόνα

Μία από της δυνατότητες της εφαρμογής είναι η αλλαγή διαστάσεων μίας εικόνας. Για το resize φροντίζει ένα σχετικό component, αλλά εδώ μας ενδιαφέρει το user interface. Η κύρια σελίδα εμφανίζει ένα table με τα ονόματα των εικόνων, μαζί με το μέγεθος και τις διαστάσεις τους. Δίπλα σε κάθε εικόνα υπάρχει ένα κουμπί "Resize". Με το πάτημα του κουμπιού εμφανίζεται ένα popup παράθυρο (με window.open). Ο χρήστης συμπληρώνει τα πεδία πλάτος και ύψος, και μετά πατάει ένα κουμπί submit. Προσοχή, το submit γίνεται στο popup παράθυρο, όχι στην κύρια σελίδα. Το submit προκαλεί την εκτέλεση ενός ASP script που αλλάζει το μεγέθους της εικόνας, και μετά το popup παράθυρο δεν χρειάζεται άλλο και μπορεί να κλείσει. Εδώ ακριβώς είναι το επίμαχο σημείο: πώς θα κλείσουμε το παράθυρο χωρίς να εμποδίσουμε το submit; Ας δούμε την πρώτη εκδοχή:

Κώδικας: Επιλογή όλων

<form method="post" action="resize.asp" onSubmit="window.close&#40;&#41;">
  <input type="text" name="width">
  <input type="text" name="height">
  <input type="submit" value="Submit">
</form>
Αυτή είναι η φόρμα της σελίδας popup. Στο συμβάν onSubmit ζητάμε να κλείσει το παράθυρο. Θα δουλέψει άραγε (quiz);

ΑΠΑΝΤΗΣΗ: Παραδόξως δουλεύει στον IE, κι επειδή η εφαρμογή μου προοριζόταν αποκλειστικά για IE, χρησιμοποίησα αυτή τη μέθοδο. Όμως στον Firefox και τον Opera δε δουλεύει σωστά. Το παράθυρο κλείνει μεν, αλλά χωρίς να γίνεται submit! Προφανώς χρειάζεται να καλέσουμε τη μέθοδο window.close() λίγο αργότερα, ώστε να δώσουμε χρόνο στον browser να κάνει submit τη σελίδα. Μία ιδέα είναι να χρησιμοποιήσουμε timer:

Κώδικας: Επιλογή όλων

<form method="post" action="resize.asp" onSubmit="setTimeout&#40;window.close, 500&#41;">
Τώρα αναβάλουμε το κλείσιμο του παραθύρου για 500 msec. Τελευταίο quiz: θα δουλέψει ή όχι;

ΑΠΑΝΤΗΣΗ: Τώρα γίνεται μεν submit, αλλά δεν κλείνει το παράθυρο! Ο λόγος είναι ότι στο διάστημα των 500 msec που μεσολάβησαν η σελίδα έχει ανανεωθεί πλήρως, και ο browser θεωρεί πώς δεν έχει νόημα να εκτελέσει τον timer μιας προηγούμενης σελίδας. Αυτό σημαίνει ότι πρέπει να δώσουμε μικρότερο interval, πρέπει να βρούμε δηλαδή τη χρυσή τομή που θα επιτρέψει την εκτέλεση τόσο του submit όσο και του close.

Στις δοκιμές μου είδα ότι για τον Firefox αρκεί interval 0 (μηδέν) msec για να επιτραπεί το submit, και στον Opera 1 msec. Αντίθετα το μέγιστο επιτρεπτό interval είναι δύσκολα καθορίσιμο. Για IE και Opera είναι περίπου 50 msec και για Firefox περίπου 150 msec. Όμως τα νούμερα αυτά παρουσιάζουν έντονη διακύμανση και εξαρτώνται και από τον όγκο των submited δεδομένων καθώς και από παραμέτρους του network. Με λίγα λόγια η όλη μέθοδος τελικά δεν είναι εντελώς αξιόπιστη, δεδομένου ότι δεν ξέρω τι γίνεται με τους άλλους browsers που δε δοκίμασα (Safari, Konqueror κ.λπ.). Καμιά άλλη ιδέα;

Το πρόβλημα με την παραπάνω προσέγγιση είναι ότι βασιζόμαστε στο popup παράθυρο να κλείσει τον εαυτό του. Αυτό όμως δεν είναι υποχρεωτικό. Μπορούμε μα εκμεταλλευτούμε ότι το κύριο παράθυρο παραμένει σταθερό και αμετάβλητο ενώ συμβαίνει submit στο άλλο. Ορίζουμε λοιπόν τη παρακάτω ρουτίνα στο κύριο παράθυρο:

Κώδικας: Επιλογή όλων

function popup_close&#40;w&#41; &#123;
  setTimeout&#40;function&#40;&#41; &#123;w.close&#40;&#41;&#125;, 500&#41;
&#125;
... την οποία καλούμε στο submit του popup παραθύρου:

Κώδικας: Επιλογή όλων

<form method="post" action="resize.asp" onSubmit="opener.popup_close&#40;window&#41;">
Τέλος του προβλήματος! Αφού λοιπόν το λύσαμε, δε χάνουμε τίποτα να βρούμε και μια δεύτερη λύση. Αυτή μάλιστα μπορεί να είναι ακόμα καλύτερη. Αντί να φροντίσουμε για το κλείσιμο το παραθύρου από τη σελίδα που φεύγει, θα το κάνουμε από τη σελίδα που έρχεται. Στη σελίδα resize.asp (που κάνει το resize) προσθέτουμε τον εξής κώδικα στο head:

Κώδικας: Επιλογή όλων

<script type="text/javascript">
  window.onload = window.close
</script>
Ο IE και ο Firefox κλείνουν το παράθυρο πριν προλάβει να εμφανιστεί η σελίδα. Αντίθετα στον Opera προλαβαίνει να εμφανιστεί αστραπιαία η νέα σελίδα πριν κλείσει το παράθυρο. Οπότε καλό είναι να την αφήσουμε εντελώς κενή. Τη λύση αυτή μπορούμε να τη συνδυάσουμε και με την προηγούμενη αν θέλουμε. Αυτά τα ολίγα για σήμερα. :P

Υ.Γ. Οι browsers στους οποίους αναφέρομαι στο κείμενο είναι οι IE6, Firefox 1.0 και Opera 8.0.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Cmg__
Δημοσιεύσεις: 1710
Εγγραφή: 29 Μαρ 2005 22:40

Η μαύρη τρύπα του scripting

Δημοσίευση από Cmg__ » 23 Ιούλ 2005 16:08

:clap: :clap: :clap: :clap: :clap: :clap: :clap:
Mpravo kai pali mpravo! :D
Alla vevaia, anti onsubmit na kleinei aytomata, ginetai kai xeirokeinita.
Δηλαδή οnsubmit να γινεται redirecting ή τέλοσπάντων να ανοίγει μία σελίδα που να
έχει ψευδολινκ με window.close ή μετά απο ένα χρονικό διάστημα να κλείνει μόνη της η redirected page :wink:

Δεν ξέρω κατα πόσο κοτσάνα ήταν αυτό οπότε προφυλάξτε τα μάτια σας :P

Cmg__
Δημοσιεύσεις: 1710
Εγγραφή: 29 Μαρ 2005 22:40

Η μαύρη τρύπα του scripting

Δημοσίευση από Cmg__ » 23 Ιούλ 2005 16:13

Cmg__ έγραψε:...
Alla vevaia, anti onsubmit na kleinei aytomata, ginetai kai xeirokeinita.
Δηλαδή οnsubmit να γινεται redirecting ή τέλοσπάντων να ανοίγει μία σελίδα που να....
πάντα με target το pop up!

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Η μαύρη τρύπα του scripting

Δημοσίευση από skeftomilos » 24 Ιούλ 2005 18:49

Η αρχική ιδέα ήταν να γίνεται submit στο popup παράθυρο, να κλείνει αυτόματα, και να γράφονται οι νέες διαστάσεις της εικόνας στο κύριο παράθυρο με scripting. Όμως η ιδέα είχε τρύπα (όχι μαύρη!). Το πρόβλημα είναι στην περίπτωση που πάει κάτι στραβά με το resize. Πώς ενημερώνεται ο χρήστης σε αυτή την περίπτωση;
:think:

Ίσως η ιδέα να γίνεται submit στο popup να μην είναι και πολύ σωστή. Τελικά το έκανα διαφορετικά, με το submit να γίνεται στην κύρια σελίδα. Δηλαδή υπάρχει στην κύρια σελίδα μία κρυμμένη φόρμα στην οποία μεταφέρονται οι τιμές πλάτος και ύψος από το popup, μετά κλείνει το popup, και τέλος γίνεται submit στην κρυφή φόρμα. Η σελίδα φορτώνεται εκ νέου και αναγράφει τις νέες διαστάσεις.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Cmg__
Δημοσιεύσεις: 1710
Εγγραφή: 29 Μαρ 2005 22:40

Η μαύρη τρύπα του scripting

Δημοσίευση από Cmg__ » 25 Ιούλ 2005 02:13

Ayto eleipe na mhn evriskes kai lysh esy! :P :wink:

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 3 επισκέπτες