3. Link to load external html Page (inside app folder)

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Link to load external html Page (inside app folder)

  • T

    Hi to all.
    I would like your Help Please.

    How can I load external html Page (inside app folder) from the Main Page?

    Please can I have a sample code for the main and external page on how to do it?

    Thank you

    0_1663159626331_EXT-HTML-Page.png

    <!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
  <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">

  <script src="components/loader.js"></script>
  <script src="lib/onsenui/js/onsenui.min.js"></script>

  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
  <link rel="stylesheet" href="css/style.css">

<script>
// Page init event
document.addEventListener('init', function(event) {
var page = event.target;

if (page.matches('#first-page')) {
page.querySelector('#push-button1').onclick = function() { document.querySelector('#navigator').pushPage('page2.html'); };
page.querySelector('#push-button2').onclick = function() { document.querySelector('#navigator').pushPage('page2.html'); };
page.querySelector('#push-button3').onclick = function() { document.querySelector('#navigator').pushPage('page2.html'); };
}

else if (page.matches('#second-page')) {
page.querySelector('#pop-button').onclick = function() { document.querySelector('#navigator').popPage(); };
}

});

if (ons.platform.isIPhoneX()) {
document.documentElement.setAttribute('onsflag-iphonex-portrait', '');
document.documentElement.setAttribute('onsflag-iphonex-landscape', '');
}
</script>

</head>
<body>

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

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

      <div class="content" style="text-align: center">
        <p>This is the Home Page.</p>
        <p><ons-button id="push-button1">./pages/Page1.html</ons-button></p>
        <p><ons-button id="push-button2">./pages/Page2.html</ons-button></p>
        <p><ons-button id="push-button3">./pages/Page3.html</ons-button></p>
      </div>
    </ons-page>
  </template>

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

      <div class="content" style="text-align: center">
        <p>This is the second page.</p>
        <ons-button id="pop-button">Pop page</ons-button>
      </div>
    </ons-page>
  </template>

</body>
</html>

    (Trying to fix issues Because of the large size of the line of the code I have in html page,
    it does not load my entire page so it shows up half).
    https://community.onsen.io/topic/4586/line-length-html-problem-editor-maxtokenizationlinelength

    0