Update Page Title With Update of Span Tag Value using Javascript

Question

I have a span tag with id='title' and this value changes after sometime. I want to update the page title with this value when it updates.

e.g. <span id='title'>Title</span> -- This is current title

when after some time it is updated by another script to

<span id='title'>New title</span>

I want to update the title of page to "New title" whenever it changes and no matter how many times it changes.

Right now I have to call function every 1 second to update the page title. Which keeps blinking the page title. So I want to monitor the change and whenever the value changes I want that value to be the title of page.

you can't update the title from the script which updates the span itself? — Khaleel, May 10 '17 at 12:30
I want to update the title using another script which monitors the span and update the title — Sachin Khokhar, May 10 '17 at 12:31
this might help. plz try. http://stackoverflow.com/questions/4292625/javascript-check-if-element-has-changed — Khaleel, May 10 '17 at 13:02
I am trying https://jsfiddle.net/sachin36987/c1yp03h9/1/ I want in this code to print newtitle in p tag with id status — Sachin Khokhar, May 10 '17 at 13:17

score 0 · Answer 1 · edited May 23 '17 at 12:26

0

This discussion seems to be looking at the same issue - just instead of a span they are monitoring a div.I know you're looking to do this with pure JavaScript but I think the thread is still good to review.
Jquery Event : Detect changes to the html/text of a div

edited May 23 '17 at 12:26

Community

1
1

answered May 10 '17 at 12:43

Sean

313
1
17

but there is browser support issue with that. – Sachin Khokhar May 10 '17 at 12:46
Yes, that is correct. There are browser support issues with using Mutation Observer officially. It is still considered experimental in Chrome and Safari. You may use it but your results may vary. https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver#Browser_compatibility – Sean May 10 '17 at 16:13

score 0 · Accepted Answer · answered May 10 '17 at 14:16

Yes. You can achieve it by

Mutation Observer

I answered your question based on your jsfiddle link in comment I have used MutationObserver to achieve what you want.

  var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || 
window.MozMutationObserver;
      var target = document.querySelector('#demo');

      var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
          if (mutation.type === 'childList') {
          console.log(mutation.type);
           document.getElementById('status').innerHTML='changed';
          }
        });
      });

      observer.observe(target, {
        attributes: true,
        childList: true,
        characterData: true
       });

I have forked it to this fiddle.

Hope it helps

Thanks Khaleel. Yours is also working. But I used javascript cookies and checked for changes every second. — Sachin Khokhar, May 10 '17 at 15:11

Update Page Title With Update of Span Tag Value using Javascript

2 Answers2