iFrame Validation

Question

J'ai actuellement un iframe dans ma page principale qui a un certain nombre de cases à cocher qui doivent être activées avant de quitter l'iframe, ie, si l'utilisateur commence à cocher les cases et à mi-chemin, puis cliquez sur le page principale, ie quitter l'iframe, je voudrais pouvoir piéger/valider qu'ils ont quitté l'iframe et les inviter avec un message indiquant ceci, disons avec un "Note: Vous perdrez toutes les données entrées ici - Laissez: Oui /Non?" tapez le message.

Toute aide/site Web serait apprécié.

Merci. Tony.

Answer 1

Prompting a User to Save When Leaving a Page. Cet article 4guys ressemble à ce dont vous avez besoin. Il parle de l'événement onbeforeunload. Il y a aussi de superbes posts ici sur stackoverflow à propos de onbeforeunload aussi.

---

Il semble que onbeforeunload ne fait pas le feu pour une iframe. Salaud!

Voici un exemple de code qui devrait fonctionner. Cela ne fonctionnera que si vous êtes dans le même domaine, sinon same origin policy empêchera l'iframe de parler au parent.

Je n'ai également pas testé ceux-ci dans de nombreux navigateurs, donc YMMV.

Vous avez deux options ici, en fonction de l'endroit où vous voulez mettre l'invite pour la logique des changements.

La première option implique l'iframe indiquant la fenêtre parente lorsqu'il y a des changements.

javascript fenêtre parent:

window.onbeforeunload=closeIt; 
    var changes = false; 
    function closeIt() 
    { 
     if (changes) 
     { 
      return "Yo, changes, save 'em?"; 
     } 
    } 
    function somethingChanged() { 
     changes=true; 
    }; 

javascript iframe:

$(function() { 
     $('input').change(parent.somethingChanged); 
    }); 

Option deux implique l'iframe prendre le contrôle de la onbeforeunload de fenêtre parent

javascript fenêtre parent:

Il n'y a pas :-)

javascript iframe:

$(function() { 
     parent.window.onbeforeunload = myCloseIt; 
     $('input').change(somethingChanged); 
    }); 
    var changes = false; 
    function myCloseIt() 
    { 
     if (changes) 
     { 
      return "Yo, changes, save 'em?"; 
     } 
    } 
    function somethingChanged() { 
     changes=true; 
    }; 

Dans l'une des options de la variable changes naïve pourrait être renforcé un peu, probablement en utilisant des techniques de l'article 4guys, pour voir s'il y a vraiment été des changements.

---

S'ils sont sur des domaines différents, mais tu es toujours en charge des « deux côtés » du HTML, il y a encore quelques options, ils sont juste plus difficile.

xssinterface est une bibliothèque qui utilise postMessage et des hachages de localisation et de magie noire vaudou secret pour communiquer inter-site.