添加 office.js 禁用 html5mode

Question

我有一个 mean-stack 网站，可以通过 $locationProvider.html5Mode(true) 启用 html5mode。 index.html 如下所示：

<html>
<head>
    <base href="/" />
    ...
</head>
<body ng-app="f">
    <ui-view ng-cloak></ui-view>
</body>
</html>

因为html5mode，我们可以在浏览器中加载，例如。 https://localhost:3000/home，将保持不变；没有 html5mode，url 将变成 https://localhost:3000/#/home.

现在我希望服务器（除了网站之外）还提供 Office 加载项。我需要能够在加载项清单文件中执行 <SourceLocation DefaultValue="https://localhost:3000/addin" />。为此，我需要添加 <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script> 在 index.html.

但是，我发现在网站index.html中添加<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>后，在浏览器中加载https://localhost:3000/home变成了https://localhost:3000/#/home，也就是说添加了office.js ] 禁用 html5mode.

有谁知道怎么回事？有人有解决方法吗？

Answer 1

正在查看 office.js 文件的调试版本：

https://appsforoffice.microsoft.com/lib/1/hosted/office.debug.js

您会看到 window 的历史 replaceState 和 pushState 函数设置为空：

window.history.replaceState = null;
window.history.pushState = null;

它禁用了操纵浏览器历史记录的能力，它似乎 Angular 认为历史记录 API 不可用，所以 Angular 退回到主题标签导航。

您可以删除这两行代码以重新启用 html5 模式，但考虑到历史记录 API 肯定是出于某种原因被禁用，可能性是 office.js 插件将在启用 html5 模式的情况下停止正常工作。

Answer 2

修改"office.js"本身就是错误的做法。首先，Store目前要求您参考官方Office.js CDN；因此，这种方法已经存在问题。此外，您不希望从事必须对一组经常更改的文件应用相同补丁的业务，也不想仅仅因为那是您修改过的版本就停留在旧版本上。

一个更好的方法是有一个额外的文件来填补空白，但只是作为一个附加的东西。它的侵入性要小得多，也不易破裂。

特别是历史问题：请参阅 Office.js nullifies browser history functions breaking history usage 以了解使用 polyfill 启用历史的方法。

Answer 3

将评论作为答案

据我所知，office.js 只有 office 应用程序才需要，在这种情况下，不要让 office-js 给您的网络应用程序带来负担。仅在需要时使用 ocLazyLoad（或其他类似库）加载 office.js optionally/dynamically。

添加 office.js 禁用 html5mode

Adding office.js disables html5mode

javascript

ms-office

angularjs

office-js

html5mode