gpt4 book ai didi

在 iframe 中托管的 Angular 2 路由应用程序

转载 作者:太空狗 更新时间:2023-10-29 18:34:42 28 4
gpt4 key购买 nike

我目前正在开发使用 Angular 2 构建的 Outlook 插件。因为它是一个 outlook 托管的应用程序,它将在跨域 iframe 中运行,对此我没有什么可以改变的。 iframe 也使用以下属性进行沙盒处理 allow-scripts allow-forms allow-same-origin ms-allow-popups allow-popups

我正在尝试使用 Angular 2 的路由器,但每当我使用 navigate 方法时,我都会收到一系列异常说明 this._history.pushState is not a function .我尝试了默认位置策略和散列位置策略,并且都得到了这个异常。我认为 HashLocationStrategy 的目的是支持不完全支持 HTML 5 的旧浏览器。这似乎违背了使用 HTML 5 history 方法的目的,例如pushState,但我对 LocationStrategyHashLocationStrategy

之间的区别的理解可能是错误的

我的问题是,有没有办法告诉路由器不要使用 history.pushState 或任何其他可以做的事情,以便我可以在此 iframe 中使用路由器。因为我收到这些异常,它会阻止我的一些应用程序启动代码执行。

编辑:附带说明一下,我的应用程序有多个页面,因此它绝对不是严格的 SPA。我试图将整个 UI 保持为静态站点,并使用路由器在页面之间导航。我不一定关心保留导航历史记录,因为它托管在 outlook 中,所以 Angular 路由器可能不适合我的用例。我也在研究为整个应用程序使用 ASP.NET MVC 之类的东西的想法,但使用 Angular 来为应用程序的每个部分/页面提供支持。

最佳答案

这不是因为 iFrame,是 Office.js 将 window.history.replaceState() 和 window.history.pushState() 设置为 null。阻止这种破坏路由器的最简单方法是将它们设置为空函数,如下面的代码片段所示,然后您就可以安全地使用 HashLocationStrategy。

    <!DOCTYPE html>
<html>

<head>
<title>office add-in</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
...
<script>
window.history.replaceState = function(){};
window.history.pushState = function(){};
</script>
...
</head>

<body>
<addin></addin>
</body>

</html>

我在 MSDN 上有一个代码示例 here具有工作路由。

关于在 iframe 中托管的 Angular 2 路由应用程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36182807/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com