添加office.js会在网址中添加#,然后将其删除

时间:2017-07-01 04:46:52

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

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

然后,我希望服务器也提供Office加载项。我需要views/addin.html包含office.js和另一个路由器,以便该网站提供一组网址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/newhttps://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 < / p>

此处没有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),但这两种行为都是奇怪的或不满意的。有谁知道如何修复它或有一个解决方法?

1 个答案:

答案 0 :(得分:0)

查看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插件是否会继续正常运行。

相关问题