OnsenUI – HDpublish GmbH

Ein Javascript Framework für WebApp Development | Entwicklung, Mini-HowTo:

Sie sehen gerade einen Platzhalterinhalt von Standard. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf den Button unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.

Inhalt entsperren

Weitere Informationen

Unser Grundannahme ist dass Ihr Cordova verwendet, darin integriert Ihr dann folgendes… .

Framework herunterladen @ https://onsen.io/ und lokal z.B. in den Cordova-www-Ordner „onsenui“ legen.

In den Header gehört dann Folgendes:

<link rel="stylesheet" href="onsenui/css/onsenui.css">
  <link rel="stylesheet" href="onsenui/css/onsen-css-components.min.css">
  <script src="onsenui/js/onsenui.min.js"></script>

Beispiel-Seite in die index.html kopieren:

<ons-navigator swipeable id="myNavigator" page="page1.html"></ons-navigator>

<template id="page1.html">
  <ons-page id="page1">
    <ons-toolbar>
      <div class="center">Page 1</div>
    </ons-toolbar>

    <p>This is the first page.</p>

    <ons-button id="push-button">Push page</ons-button>
  </ons-page>
</template>

<template id="page2.html">
  <ons-page id="page2">
    <ons-toolbar>
      <div class="left"><ons-back-button>Page 1</ons-back-button></div>
      <div class="center"></div>
    </ons-toolbar>

    <p>This is the second page.</p>
  </ons-page>
</template>

dazu gehört dann noch folgender Javascript Code, entweder direkt in die Site kopieren oder in einen separate Javascript-Datei, z.B. onsen.custom.js

document.addEventListener('init', function(event) {
  var page = event.target;

  if (page.id === 'page1') {
    page.querySelector('#push-button').onclick = function() {
      document.querySelector('#myNavigator').pushPage('page2.html', {data: {title: 'Page 2'}});
    };
  } else if (page.id === 'page2') {
    page.querySelector('ons-toolbar .center').innerHTML = page.data.title;
  }
});

Wichtig, wenn Ihr den folgenden Fehler erhaltet:

[Error] Refused to execute a script because its hash, its nonce, or ‚unsafe-inline‘ appears in neither the script-src directive nor the default-src directive of the Content Security Policy. (onsen.html, line 41)

Dann ergänzt Content-Security-Policy in der Meta-Info um:

 'unsafe-inline'

So lautet es dann:

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">