火箭聊天 iframe 集成。浏览器的导航问题

Question

我在我的应用程序中集成了 Rocket Chat。我有一个问题，当我尝试使用浏览器的导航（返回按钮，前进按钮）时，它不是导航应用程序屏幕，而是导航火箭聊天 iframe。

如有任何帮助，我们将不胜感激。

Answer 1

我在集成 rocketchat 时遇到了同样的问题，以下解决方案对我有用：

问题

1) 当通过在 html 中明确写入或通过 javascript 将其附加到 DOM 来启动 iframe 时，rocketchat 的 url 的新条目是推入浏览器的历史堆栈

2) 如果您从父应用程序发送令牌到 iframe 中的 rocket chat 进行登录，如果登录成功，Rocket chat 将重定向从 root_url 到 root_url/home 创建一个新的浏览器历史堆栈中的条目

3)每次您在 rocket chat（在 iframe 内）中单击锚标记（进入房间等）时，都会创建另一个条目并将其推送到浏览器历史记录堆栈中

现在，当应用程序加载时，堆栈看起来像这样，即使 iframe 在开始时默认隐藏

rocketchat_url/home
rocketchat_url
app_url

现在如果你按下后退按钮，浏览器将转到 rocketchat_url ，路由会发现本地存储中已经存在令牌，因此它将再次重定向到 /home，因此我们将保留按后退按钮，它不会工作

解决方案

我们需要避免为我上面提到的所有三点在浏览器的堆栈中创建一个新条目

1 & 2) 我们可以先添加一个空的 iframe，而不是直接将 url 赋给 html 中的 iframe，这将为该 iframe 创建一个 window 对象，现在我们可以访问 window 并使用 location.replace 设置 url，这将替换浏览器历史记录中的当前条目，而不是创建一个新条目，这将适用于第一个点，对于第二点，我们可以直接提供'/home'url，这样火箭聊天就不必在登录后重定向，如果你没有登录/home page 会自动从你的应用程序中获取令牌，如果你正在使用postMessage 发送令牌。

$('body').append(`<iframe id="chat"></iframe>`);
$('iframe#chat')[0].contentWindow.location.replace(chat._baseUrl+'/home');

3) 在 rocket chat 中的所有锚标签上添加一个事件侦听器，它将用锚标签的 url 替换历史堆栈中的当前条目，以便在执行点击时浏览器尝试创建新条目entry 它发现相同的条目已经存在于堆栈顶部并且不创建新条目

var anchors = document.getElementsByTagName('a');
        for (var i = 0; i < anchors.length; i++) {
            var anchor = anchors[i];
            anchor.addEventListener('click', function (event) {
                history.replaceState(null, null, anchor.href);
            }, false);
        }

^以上代码需要运行在 iframe window

中

希望这会给您足够的洞察力来解决问题

火箭聊天 iframe 集成。浏览器的导航问题

Rocket chat iframe integration. Browser's navigation issue

javascript

rocket.chat