子 iframe 不在焦点时的 Javascript 浏览器可见性

问题描述

这是我想要实现的目标：

• 我们将 Zendesk 用于客户服务。
• Zendesk 提供了将私人应用添加到支持界面的可能性。
• 我们正在努力确定我们何时真正处理门票，在门票界面中回答或填写信息。

私有应用程序是我们唯一可以控制 Iframe / Javascript 的东西。

我们已经可以看到的东西：

• 如果我们将浏览器 Tab 从 Tab A 切换到 Tab B（事件：非活动）
• 如果我们切换回 Tab A（事件：活动）

问题：

• 当点击屏幕的 Zendesk 部分时，我的应用会根据我们看到的事件失去焦点。
• 点击应用部分返回焦点。
• 当我们 ALT + Tab 远离浏览器时（例如进入另一个应用程序），不会触发任何事件，除非：Iframe 之前被点击过。

这是用于应用程序的代码：

var hidden,visibilityChange;
var visability;
var client;

if (typeof document.hidden !== "undefined") {
  hidden = "hidden";
  visibilityChange = "visibilitychange";
} else if (typeof document.mozHidden !== "undefined") {
  hidden = "mozHidden";
  visibilityChange = "mozvisibilitychange";
} else if (typeof document.msHidden !== "undefined") {
  hidden = "msHidden";
  visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
  hidden = "webkitHidden";
  visibilityChange = "webkitvisibilitychange";
}

var supported = !(
  typeof document.addEventListener === "undefined" || hidden === undefined
);

if (supported) {
    document.addEventListener(visibilityChange,onVisibilityChange,false);
}

function isTabVisible() {
  return supported && !document[hidden];
}

// === tailor to your needs === //
function onVisibilityChange(){
    visability = isTabVisible();
    console.log('[Visibility] Tab visibility changed. Visible ?',isTabVisible());
    main(client);
    // add Main here?!
}



document.onfocus = function() {
    console.log('App is on focus');
};

document.onblur = function() {
    console.log('App is blurred');
};

$(function() {
    client = ZAFClient.init();
    client.invoke('resize',{width: '100%',height: '375px'});
    main(client);
});



async function main(client) {
    visability = isTabVisible();
    console.log("[Visibility] Visible in Main?",isTabVisible());
};

模糊和焦点的部分是我多次阅读的部分，这对我们有用，但前提是之前点击了“我的应用”部分

document.onfocus = function() {
    console.log('App is on focus');
};

document.onblur = function() {
    console.log('App is blurred');
};

有没有办法获得想要的行为，即： 无论是应用程序还是其他地方，只要我们在浏览器窗口上，就保持焦点或触发模糊事件？

编辑： 尝试了以下代码：

    window.top.onfocus = function() {
    console.log('Top is on focus');
      };

    window.top.onblur = function() {
        console.log('Top is blurred');
    };

这给了我错误信息：

未捕获的 DOMException：权限被拒绝访问跨域对象上的“onfocus”属性

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）