javascript - 如果浏览器选项卡处于事件状态或不活动状态，如何更改 Shopify 标题

Question

我正在尝试在 Shopify 中完成此任务。

如果用户的浏览器选项卡处于事件状态(将页面标题更改为消息 A)，并且选项卡未处于事件状态(将页面标题更改为显示消息 B)。

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

我将此代码插入文件的标题中: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.");