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

Question

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

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

Answer 1

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

问题

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

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

3) 每次您在火箭聊天(在 iframe 内)中单击 anchor 标记(进入房间等)时，都会创建另一个条目并将其推送到浏览器历史记录堆栈中

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

• rocketchat_url/home

• rocketchat_url

• app_url

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

解决方案

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

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

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

3) 在 rocket chat 中的所有 anchor 标签上添加一个事件监听器，它将用 anchor 标签的 url 替换历史堆栈中的当前条目，这样当执行点击并且浏览器尝试创建新条目时，它会找到相同的条目已经出现在栈顶，不会创建新条目

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窗口内运行

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