How to use Jquery to trigger a function when the page title is changed?

Question

How to use Jquery to trigger a function when the page title is changed?

Asked 3 years, 6 months ago

Viewed 27 times

0

Hello, I am new on this platform, I do not know if my question will meet the requirements, but I will try to be as specific as possible!

I want to trigger an event using Jquery, so when changed, I was trying to use the following function:

$('title').change(function(){
console.log('O titulo foi alterado!')
})

But when I change the value of the tag, nothing happens, someone could explain to me why, or if it is possible to present me a valid way to do this.. From now on :D!

You change the value of title through a input?

– Cmte Cardeal

2020/12/21 at 00:25
No, through the devtools

– Ivan Fuhr

2020/12/21 at 00:35
Actually, I want this event to be triggered when I receive a new message on Whatsapp, when there is a message on Whatsapp its title is changed and I want to capture this event

– Ivan Fuhr

2020/12/21 at 00:39

1 answer

Browser other questions tagged javascript html jquery

You are not signed in. Login or sign up in order to post.

by Cmte Cardeal • **5,299** points · Answer 1 · 2020-12-21T00:49:44+00:00

if I can be presented with a valid way of doing this..

Using pure Javascript you can use the MutationObserver which is an API that observes changes in the DOM and triggers a function when it detects it.

For example, you select the title via querySelector and assigns it to instance MutationObserver using the method observe. Run a function of callback for the object MutationObserver triggers when a change occurs in the title.

Sample code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const title = document.querySelector('title');

      new MutationObserver(function (mutations) {
        console.log(mutations[0].target.nodeValue); // mostra o novo valor

        console.log('Title mudou!'); // avisamos que o title mudou
        alert('Title mudou!')
      }).observe(title, { // informamos que ele deve observar 'title'
        subtree: true,
        characterData: true,
        childList: true,
      });
    </script>
  </body>
</html>

_{I don’t know if this API is implemented in Jquery.}