web-dev-qa-db-fra.com

Où attraper l'événement Post?

J'utilise le code JavaScript suivant pour ouvrir une nouvelle fenêtre dans laquelle la page de connexion Joomla est affichée:

window.open('https://URL', '_blank', 'location=yes');

La nouvelle fenêtre s'ouvre comme suit:

enter image description here

Je dois renseigner le nom d'utilisateur dans son champ automatiquement. J'ai trouvé la méthode postMessage () très appropriée pour les communications entre domaines (par exemple, this exemple ). J'ai donc modifié mon JavaScript comme ceci:

var loginWindow = window.open('https://URL', '_blank', 'location=yes');
loginWindow.postMessage('username', 'foobar');

Du côté de la réception, (Joomla), je dois ajouter ce code afin de saisir le message de publication:

window.addEventListener('message', function(event) {
  var message = event.data;
  $('input.login').val(message);
});

Ma question est la suivante: où puis-je ajouter ce code?
Je ne connais pas bien la structure de Joomla et je n’ai pas vu de code JavaScript dans les fichiers comme formulaire de connexion (components/com_users/views/login/tmpl/default_login.php). Alors, où puis-je ajouter ce code JavaScript. Si je ne peux pas, quelles alternatives ai-je?

Mettre à jour
Suivant les conseils de @Rene Korss, j’ai ajouté mon code à la fin du fichier suivant /templates/theme718/html/com_users/login/default_login.php Je mentionne une partie du code précédent dans le fichier pour montrer sa nature. Mon code commence à partir de <?php

<script>
......
if(jQuery( window ).height()<620){
    jQuery('#copy-rightfp').addClass("copy-rightfps");
} else {
    jQuery('#copy-rightfp').removeClass("copy-rightfps");
}

function alertforget(){

    var div = '<div class="green"><p><?php echo JText::_('COM_FORGET_OOPS') ?></p></div><div class="font12"><p><?php echo JText::_('COM_FORGET_PLEASE_CALL') ?></p></div>';

    jQuery('#msgcontainer .note').html('');
    jQuery('#msgcontainer .note').append(div);

    jQuery('#msgcontainer').bPopup({
            modalClose: false,
            opacity: 0,
            positionStyle: 'fixed'
    });
}


<?php
$document = JFactory::getDocument();

$document->addScriptDeclaration("
    window.addEventListener('message', function(event) {
      var message = event.data;
      $('input#username').val(message);
    });
");
?>

</script>

Je trouve que l'élément dans lequel je veux remplir le message s'appelle username, ci-dessous:

enter image description here

Cependant, lorsque la fenêtre s'ouvre, rien ne se produit. Aucune erreur ne s'affiche dans la console

joomla-3.xphplogin
3
Hawk

Je remplacerais Joomla! vue de connexion.

Copier le contenu de

components/com_users/views/login/tmpl/default_login.php

et créez un nouveau fichier .php dans

YOUR_TEMPLATE_NAME/html/com_users/login/default_login.php

et collez le contenu copié là.

Voir Joomla! docs for Comment remplacer la sortie de Joomla! core .

Et puis ajoutez le fichier javascript ou le javascript en ligne pour démarrer le fichier remplacé.

Inline JS (ajoute du code entre les balises <head></head>)

<?php
$document = JFactory::getDocument();
$document->addScriptDeclaration("
    window.addEventListener('message', function(event) {
      var message = event.data;
      $('input.login').val(message);
    });
");
?>

OR

JS externe 

<?php
    $document = JFactory::getDocument();
    $document->addScript('/wherever/your/js/file.js');
?>

Vous pouvez ajouter ce fichier JS à votre dossier de modèles ou à l'endroit que vous préférez. Et ajoutez votre code au fichier JS.

Voir Joomla! Docs for Ajout de JavaScript .

EDIT:

Vous utilisez la méthode postMessage() de manière incorrecte. Selon MDN vous devez spécifier targetOrigin, qui est le deuxième argument.

Si, au moment où l'événement est programmé pour être envoyé, le schéma, le nom d'hôte ou le port du document de otherWindow ne correspond pas à celui fourni dans targetOrigin, l'événement ne sera pas distribué. l'événement ne sera envoyé que si les trois matchs correspondent.

Actuellement, il s’agit de foobar. Donc, il n'y a pas de correspondance et l'événement ne sera pas envoyé. Modifiez votre code pour cela (remplacez Origin).

loginWindow.postMessage('username_value_here', 'http://example.com');

EDIT 2

Comme le code envoyait postMessage juste après l'ouverture de popup, il l'envoyait trop tôt. La destination n'a pas encore été chargée.

Nous avons donc fini avec ce code:

Côté destination 

/**
 * Ask for username from opener
 */

window.onload = function(){ 
    window.opener.postMessage('giveMeUsername', '*'); 
};

/**
 * Event to catch opener messages
 */

window.addEventListener('message', function(event) {
    // Allow only wanted domain
    if(event.Origin !== 'http://example.com') return;
    var message = event.data;
    jQuery('input#username').val(message);
}, false);

Côté ouverture 

/**
 * Send username to popup, if it asks
 */
window.addEventListener('message', function(event) {
    var message = event.data;

    // If popup asks for username
    if(message == 'giveMeUsername'){
        loginWindow.postMessage('username_value', '*');
    }
}, false);
5
Rene Korss