如果浏览器选项卡处于活动状态，如何更改Shopify标题

Question

I'm trying to accomplish this in Shopify.

If the user has the browser tab active (change the page title to message A) and if the tab is not active (change page title to show message B).

For some reason, something is missing or wrong in my code.

I'm inserting this code in the header of the file: theme.liquid

<script>
      $(function () {
          leftTitle = 'Message A'; 
          backTitle = 'Message B';

          $(window).blur(function () {
              page.title = leftTitle;
          });

          $(window).focus(function () {
              page.title = backTitle;
          });
      });

    </script>

Any advice?

Answer 1

I think you're trying to use document.title = leftTitle; and document.title = backTitle;

page doesn't exist natively on browsers, unless you've declared it before, so page.title doesn't change anything; it should give you a console error.

 var leftTitle = 'Blurred'; var backTitle = 'Focused'; window.onblur = function () { console.log("Blur"); document.title = leftTitle; }; window.onfocus = function () { console.log("Focus"); document.title = backTitle; }; console.log("Event listeners initialized."); 

Answer 2

I found the solution myself:

<script>
  var message = "Insert your message here";
  var original = document.title;

  window.onblur = function () { document.title = message; }
  window.onfocus = function () { document.title = original; }
</script>