2017-07-01 14 views
1

私は平均スタックWebサイトを持っています。最初はviews/index.html<ui-view></ui-view>)がすべてのページのエントリポイントです。それはangular-ui-routerhtml5modeを使用します。したがって、ブラウザのhttps://localhost:3000/XXXXは(#を追加するのではなく)同じままで、ルータに基づいて対応するコンテンツを表示します。office.jsを追加すると、URLに#が追加されてから削除されます。

次に、サーバーをOfficeアドインとしても使用したいと考えています。 views/addin.htmlにはoffice.jsが含まれ、別のルータにはURLのセットとしてhttps://localhost:3000/addin/XXXXが提供され、html5modeであるかどうかは関係ありません(URLには#が含まれています)。だからここ

routes/index.jsのcorrepsondingです:

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でも参照して、ここでhtml5modeなしAdd-in Error Something went wrong and we couldn't start this add-in. Please try again later or contact your system administrator.

なり、ブラウザで.../addin/newまたは.../addin/homeだけでしょう表示addin content;アドインは、addin contentでロードすることもできます。

私の目標は、.../addin/newまたは.../addin/homeを指し示すアドインを作成することです。 office.jsはどこかにロードする必要があります。私はそれがhtml5mode(すなわち、URLは#)であるかどうか気にしませんが、いずれの方法でもその動作は奇妙または不満です。誰かがそれを修正する方法や回避策を知っていますか?あなたは、ウィンドウの歴史replaceStateとpushState機能がnullに設定されていることがわかります

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

:office.jsファイルのデバッグバージョンを見てみると

+0

https:// stackoverflowの重複。com/questions/44604703/adding-office-js-disables-html5mode/44858254#44858254 –

答えて

0

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

どのブラウザの履歴を操作する機能を無効にし、履歴APIが利用できないと考えているように見えるので、Angularはハッシュタグナビゲーションに戻ります。あなたが探してすることにより、これらの2つの行を見つけることができますoffice.js縮小さバージョンで

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

あなたは再度有効html5modeに次の2行のコードを削除することもできますが、オフィスどうかはわかりません。 jsプラグインは正常に動作し続けます。

+0

ありがとうございました... 'office.js'をローカルにコピーしました。' https:// localhost:3000/static/office.js'はファイルをうまく表示します。しかし、新しい参照で 'addin.html'を読み込むとコンソール' Uncaught SyntaxError:Unexpected token <:3000/static/o15apptofilemappingtable.js:1'にエラーが表示されました。私はそれらの2つの 'window.history'行を削除しても、いつもこのエラーが出ます... – SoftTimur

+0

https://stackoverflow.com/questions/44861833/cannot-load-local-office-jsを参照してください。 – SoftTimur

関連する問題