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

Question

我正尝试在 Shopify 中完成此操作。

如果用户的浏览器选项卡处于活动状态（将页面标题更改为消息 A）并且如果选项卡未处于活动状态（将页面标题更改为显示消息 B）。

出于某种原因，我的代码中缺少或存在错误。

我将这段代码插入到文件的 header 中：theme.liquid

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

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

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

    </script>

有什么建议吗？

Answer 1

我认为您正在尝试使用 document.title = leftTitle; 和 document.title = backTitle;

page 本身不存在于浏览器中，除非您之前声明过它，因此 page.title 不会改变任何东西；它应该给你一个控制台错误。

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

我自己找到了解决方案：

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

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

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

How to change Shopify Title if the Browser tab is active or not

javascript

liquid

shopify