Takis

Takis

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

<!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

Takis

Yes I did split the lines, without any result.
I have done many extra tests but I have not found a solution.
I am disappointed :-(

0_1648221404653_Screenshot .png

Takis

Υes i saw that you can not set Monaca Cloud IDE settings
Υes the problem exists.
anyone can try it, making 1 or 2 page/s with long lines and will see that the text is cut.

Takis

emccorson thank you for the answer,
where can i find what you are telling me?

I think the problem is inside Monaca. I have tried both ways with Monaca CLI / Monaca LocalKit and have not found a solution, it always limits the code length.
The other thing I’m thinking about is whether it’s an ONSEN UI issue that limits line length.
I would appreciate if anyone can please find a solution, because I can not proceed with the code of the app.

Thank you

Takis

Hello everyone

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.
and I get the message below on Monaca Cloud IDE

Tokenization is skipped for long lines for performance reasons.
This can be configured via editor.maxTokenizationLineLength.

Is There Any Way to Increase Line Length? and how it can be done, what steps I need to follow?

P.S. I have already Formatted the html code to one line, but the problem remains.

Please Help
Thank you
Takis

Takis

Dear emccorson Thanks for your answer.

The screen issue on iPhone X in WKWebView already existed in Cordova 9, but it has not been fixed and it also exists in Cordova 10.

The problem temporary fixed if the app is down to the taskbar and reopened.
But if the app is completely closed by the taskbar and reopened, the issue returns.

After much searching I have found if it is added to the style -the following code- then the issue is fixed… but this is something temporary…

<style>
html, body {
  width: 100vw;
  height: 100vh;
}
</style>

Takis

Dear Ogunm
Thank you very much for replay.

I tried to enter the code you suggested, but the problem is not solved.
I get the following error:
TypeError: is not a function. (In ‘$ (’ body ‘)’, ‘$’ is undefined)

same problem on the pure javascript (document.body.style.height= window.screen.availHeight;)

I use JavaScript Monaca Templates (Onsen UI V2 JS Navigation & Splitter)

P.S. i dont use jquery…
if i have to use jquery to resolve the issue, which version should i?

Thank you again

…My Script…

  <script>
    ons.ready(function() {
$('body').height(window.screen.availHeight);
      console.log("Onsen UI is ready!");
    });

    window.fn = {};
    window.fn.open = function() {
      var menu = document.getElementById('menu');
      menu.open();
    };
    window.fn.load = function(page) {
      var content = document.getElementById('content');
      var menu = document.getElementById('menu');
      content
        .load(page)
        .then(menu.close.bind(menu));
    };

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

Takis

Hello all,

after Cordova 10 update, have screen view issues on iPhone XS, o Blank bar appears on bottom of page

How can fix this?

on the MonacaLocalKit got the following message
How can update my Apps on the new Cordova version?

extra Enabled Plugins:
Cordova-plugin-email-composer
InAppBrowser

also the SplashScreenDelay not working
<preference name=“SplashScreenDelay” value=“7000”/>

Thank you
Takis

Takis

@Takis

Posts made by Takis