3

I use the following JavaScript to open new window in which Joomla login page displayed:

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

The new window opens is as follows:

enter image description here

I need to populate the username in its field automatically. I found postMessage() method very suitable to do cross-domain communications (e.g., this example) . So I amended my JavaScript like this:

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

On the receiving side, (Joomla), I need to add this code in order to catch the post message:

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

My question is, where can I add this code?
I'm not familiar with Joomla structure, and I did not see any JavaScript in the files like login form (components/com_users/views/login/tmpl/default_login.php). So where can I add this JavaScript code. If I cannot, what alternatives do I have?

Update
Based on @Rene Korss advice, I added my code at the end of the following file /templates/theme718/html/com_users/login/default_login.php I mention part of the previous code in the file to show its nature. My code starts from <?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>

I find that the item I want to populate the message into called username, from below:

enter image description here

However, when the window opens, nothing occurs. No errors show in the console

Improve this question

1 Answer 1

Reset to default
5

I would override Joomla! login view.

Copy contents of

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

and create new .php file in

YOUR_TEMPLATE_NAME/html/com_users/login/default_login.php

and paste copied contents there.

See Joomla! docs for How to override the output from the Joomla! core.

And then add javascript file or inline javascript to start of overrided file.

Inline JS (it adds code between <head></head> tags)

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

OR

External JS

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

You could add this JS file to your template folder or wherever your prefer. And add your code to JS file.

See Joomla! docs for Adding JavaScript.

EDIT:

You are using postMessage() method improperly. According to MDN you have to specify targetOrigin, which is second argument.

If at the time the event is scheduled to be dispatched the scheme, hostname, or port of otherWindow's document does not match that provided in targetOrigin, the event will not be dispatched; only if all three match will the event be dispatched.

Currently it is foobar. So there is no match, and event wont be dispatched. Edit your code to this (replace origin).

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

EDIT 2

Since code was sending postMessage right after opening popup, it sent it too early. Destination wasn't loaded yet.

So we ended up with this code:

Destination side

/**
 * 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);

Opener side

/**
 * 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);
Improve this answer
10
  • Where can I find the new directory to create new .php file? According to the reference, beez should be inside templates directory. I found directory beez5 and beez_20, and html directory under them. But under html directory I did not find com_users, only found com_contacts
    – Hawk
    Mar 31, 2015 at 6:54
  • 1
    If it dosen't exist, you have to create this folder yourself. And this should be under your current template. In administrator go to Extensions > Template Manager and see what template is currently active for site location. Then you would create new file under that template folder.
    – Rene Korss
    Mar 31, 2015 at 6:57
  • I found from the administrator one template called theme 718 has the sign assigned ticked which means it is the active one, isn't ? Now under the directory templates/theme 718/html/com_users/login/ I found there is already a file called default_login.php with totally different contents.
    – Hawk
    Mar 31, 2015 at 8:43
  • Ok. Thats correct. Then just add the inline or external JS.
    – Rene Korss
    Mar 31, 2015 at 8:49
  • I added the code, it opens the window but no message is populated in username field input field. I'm not sure how to debug it to know if the code being run or not.
    – Hawk
    Mar 31, 2015 at 8:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.