添加office.js会在URL中添加#，然后将其删除

Question

添加office.js会在URL中添加#，然后将其删除

javascriptangular-ui-routerms-officeoffice-jshtml5mode

3

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

然后，我想让服务器也提供Office插件。我需要包含office.js和另一个路由器的views/addin.html，以便网站提供一组URL：https://localhost:3000/addin/XXXX，如果其中一个url包含#，那么我不介意它是否为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中是否有#），都会出现奇怪或不令人满意的行为。有没有人知道如何解决或有解决方法？

- SoftTimur

重复的问题，参见 https://dev59.com/ZqLia4cB1Zd3GeqPmqzD#44858254。 - Elwin Arens

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Elwin Arens · Accepted Answer

查看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退回到哈希标记导航。

在minified版本的office.js中，您可以通过查找找到这两行代码：

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

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