添加 office.js 在 url 中添加 #，然后将其删除答案

【问题标题】：Adding office.js adds # in the url, then removes it添加 office.js 在 url 中添加 #，然后将其删除
【发布时间】：2017-07-01 04:46:51
【问题描述】：

我有一个平均堆栈网站。最初，views/index.html（具有<ui-view></ui-view>）是所有页面的入口点。它使用angular-ui-router 和html5mode。因此，浏览器中的https://localhost:3000/XXXX 将保持不变（而不是添加#）并根据路由器显示相应的内容。

然后，我希望服务器也提供 Office 加载项。我将需要包含office.js 的views/addin.html 和另一个路由器，以便该站点提供一组网址https://localhost:3000/addin/XXXX，我不介意它是否为html5mode（网址可以包含#某处）。

所以这里是routes/index.js的对应：

router.get('/addin/*', function (req, res) {
    console.log("router.get /addin/*");
    res.sendfile('./views/addin.html')
});

router.get('*', function(req, res) {
    console.log("router.get *");
    res.sendfile('./views/index.html');
});

这里是views/addin.html：

<html>
<head>
    <title>F-addin</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.js"></script>
    <!--<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>-->
    <base href="/" />
</head>
<body ng-app="addinF">
    addin content
    <ui-view ng-cloak></ui-view>
</body>
<script>
    var addinApp = angular.module('addinF', ['ui.router'])
    addinApp.config(['$stateProvider', '$locationProvider', function ($stateProvider, $locationProvider) {
        $stateProvider
            .state('addinNew', {
                url: '/addin/new',
                template: "new page"
            })
            .state('addinHome', {
                url: '/addin/home',
                template: "home page"
            })
        $locationProvider.html5Mode(true);
    }]);
</script>
</html>

当office.js 被如上注释时，https://localhost:3000/addin/new 和https://localhost:3000/addin/home 在浏览器中运行良好。但是，当 office.js 未注释时，会出现一个奇怪的行为：在浏览器中键入 https://localhost:3000/addin/new 会更改为 https://localhost:3000/#/addin/new，然后又更改回 https://localhost:3000/addin/new。我们会看到addin content new page 出现一次然后消失。

如果office.js 未注释，如果我们加载带有<SourceLocation DefaultValue="https://localhost:3000/addin/new"/> 的清单文件，我们还会在任务窗格中看到addin content new page 出现一次然后消失，然后Add-in Error Something went wrong and we couldn't start this add-in. Please try again later or contact your system administrator.

这里没有html5mode，浏览器中的.../addin/new或.../addin/home只会显示addin content；加载项可以加载，也只有addin content。

我的目标是使指向.../addin/new 或.../addin/home 的加载项工作。 office.js 必须加载到某个地方。我不介意它是否是html5mode（即url 有#），但无论哪种方式的行为都是奇怪的或不令人满意的。有谁知道如何解决它或有解决方法？

【问题讨论】：

stackoverflow.com/questions/44604703/… 的副本。

标签： javascript angular-ui-router ms-office office-js html5mode

【解决方案1】：

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

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

您会看到窗口的历史记录 replaceState 和 pushState 函数设置为 null：

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

这禁用了操纵浏览器历史记录的能力，并且似乎 Angular 认为历史 API 不可用，因此 Angular 回退到标签导航。

在office.js 缩小版中，您可以通过查找找到这两行：

window.history.replaceState=e;window.history.pushState=e;

您可以删除这两行代码以重新启用 html5mode，但我不确定 office.js 插件是否会继续正常工作。

【讨论】：

谢谢...我将office.js 复制到本地，这样https://localhost:3000/static/office.js 可以很好地显示文件。但是使用新引用加载addin.html 在控制台Uncaught SyntaxError: Unexpected token < :3000/static/o15apptofilemappingtable.js:1 中出现错误。无论我是否删除这两条 window.history 行，我总是会收到此错误...