Javascript 火箭聊天iframe集成。浏览器&x27；中国的导航问题

我已经在我的应用程序中集成了Rocket Chat。我遇到了一个问题，当我尝试使用浏览器的导航（返回按钮、前进按钮）时，它不是导航应用程序屏幕，而是导航rocket chat iframe

---

非常感谢您的帮助。

我在集成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/主页

• rocketchat_url

• 应用程序url

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

解决方案

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

1&2）我们可以先添加一个空的iframe，这将为该iframe创建一个窗口对象，现在我们可以访问该窗口并使用location.replace设置url，这将替换浏览器历史记录中的当前条目，而不是创建一个新条目，这将适用于第一点，对于第二点，我们可以直接给出“/home”url，这样rocket chat在登录后就不必重定向，如果您没有登录，如果您使用postMessage发送令牌，则主页将自动从应用程序中获取令牌

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

$（'body'）。追加（``）；
$（'iframe#chat'）[0].contentWindow.location.replace（chat._baseUrl+'/home'）；

3） 在rocket chat中的所有锚定标记上添加一个事件侦听器，该事件侦听器将用锚定标记的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);
        }

var-anchors=document.getElementsByTagName（'a'）；
对于（var i=0；i

^以上代码需要在iframe窗口内运行

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