35700
はじめまして。

onsenUIを使用してWebページを作成しています。  
monacaでの開発の際には、ons-
navigatorを使用してindex.htmlとは別のファイルを作成してpushPage()等できたのですが、Webページでは以下のエラーが出てしまい、動作しません。

=====

XMLHttpRequest cannot load file:///xxxx/xxx/xxxx/test/start.html. Cross origin
requests are only supported for protocol schemes: http, data, chrome, chrome-
extension, https.

Uncaught Error: The page is not found: start.html  
at XMLHttpRequest.xhr.onerror (internal.js:151)  
at internal.js:153  
at setImmediate.js:48  
at runIfPresent (setImmediate.js:67)  
at onGlobalMessage (setImmediate.js:113)

=====

以下にソースを添付します。

=====

・index.html

```

    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <script src="lib/OnsenUI2.4.0/js/onsenui.js"></script>
        <link rel="stylesheet" href="lib/OnsenUI2.4.0/css/onsenui.css" />
        <link rel="stylesheet" href="lib/OnsenUI2.4.0/css/onsen-css-components.css" />
      </head>
      <body id="index">
        <ons-navigator animation="fade" id="testNavigator" page="start.html" refresh="true"></ons-navigator>
      </body>
    </html>
    
```

・start.html

```

    <ons-page id="start-page">
      ここは start.html です。
    </ons-page>
    
```

=====

使用しているonsenUIのバージョンは、2.4.0、  
検証しているブラウザはchromeです。

全てindex.htmlにまとめてしまえば動くのですが、管理が乱雑になってしまい困っています。

解決策をご存知でしたら、ご教授頂けますでしょうか？  
宜しくお願い致します。
CC BY-SA 3.0
2017-06-19T02:40:23.287
35695
2017-06-23T08:58:07.260
2017-06-19T02:48:14.330
23883
23883
question
onsen-ui
onsenUIを使ったWebサイトを作成する際、ページごとにファイルを分割したい
> XMLHttpRequest cannot load file:///xxxx/xxx/xxxx/test/start.html.  
>  Cross origin requests are only supported for protocol schemes: http,  
>  data, chrome, chrome-extension, https.

Chromeでのエラーに関してはAjaxで非同期にローカルファイルを読み込むことができないという[Chromeの制限](http://dev.classmethod.jp/etc/chrome-
localfile-security/)のようです。  
オプション指定やsudo権限でChrome起動すれば制限を受けないという記述を見つけましたが、おそらくやりたいことの根本解決ではないでしょう。

navigaterによるルーティング制御はSPAを想定されたものです。  
そのため$templateCacheを利用して事前にテンプレートを読み込んでおくことで対処できるかと思います。

```

    var myApp = angular.module('myApp', []);
    myApp.run(function($templateCache) {
      $templateCache.put('start.html', '<ons-page id="start-page">ここは start.html です。</ons-page>');
    });
    
```

[onsen-
uiのページ定義](https://ja.onsen.io/v2/docs/guide/angular1/index.html#template)や[$templateCacheのドキュメント](https://docs.angularjs.org/api/ng/service/$templateCache)も参考にしてください。
CC BY-SA 3.0
2017-06-19T05:35:56.527
35700
2017-06-23T08:58:07.260
2017-06-23T08:58:07.260
20272
20272
35695
answer