Question

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

任何帮助都将受到高度赞赏。

Answer 1

在整合火箭聊天程序时遇到了相同的问题，以下解决方案对我有效：

问题

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

2）如果您将令牌从父应用程序发送到iframe中的火箭聊天室进行登录，如果登录成功，则火箭聊天室将重定向，从root_url到root_url / home在浏览器历史记录堆栈中创建新条目

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

现在，在加载应用程序后，即使iframe在开始时默认处于隐藏状态，堆栈看起来也是如此

rocketchat_url / home
rocketchat_url
app_url

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

解决方案

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

1＆2）我们可以先添加一个空的iframe，然后为该iframe创建一个窗口对象，而不是直接在html中为该iframe提供url，现在我们可以访问该窗口并使用location.replace进行设置网址，它将替换浏览器历史记录中的当前条目，而不是创建一个新条目，这将适用于第一点，对于第二点，我们可以直接提供'/ home'网址，这样火箭聊天就不必重定向登录后，如果您未登录，则/ home页面将自动从您的应用程序获取令牌（如果您使用postMessage发送令牌）。

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

3）在火箭聊天中的所有锚标记上添加一个事件侦听器，该事件侦听器将用锚标记的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窗口中运行

希望这将为您提供足够的见解来解决问题

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

1 个答案: