Where to place custom.js file for separate html page?

LittleOldLady

Hello There,

I think this is a simple question. I have three separate pages. One page needs to reference a custom.js file.

If I put the js in that page using a <script> tag, the js works, but I’ve tried placing the custom.js file in the index and the needed page. It doesn’t work. Any help would be appreciated. I’m sure I’m missing something simple.

-R

emccorson

If your separate file is just a template to be loaded by, for example, ons-navigator, then you should put the JS file in the index page e.g.:

// index.html
<script src="custom.js"></script>
<body>
  <ons-navigator page="page.html"></ons-navigator>
</body>

// page.html
<template>
  <ons-page>
    My page that uses the custom JS.
  </ons-page>
</template>

LittleOldLady

Thank you for your reply, but my pages are not templates. They are separate pages. I don’t like having all of the pages and script in one place. It becomes hard to read. I separated the pages and I’d like to separate the code, but I’m not finding a way to do that. I’ve read the docs but probably missed this. TIA -R

If I place the actual script in the separate myPage.html, it works.
…

<script>
 var canvas = new fabric.Canvas('c');
var rect = new fabric.Rect({
left: 100,
top: 100,
fill: 'red',
width: 20,
 height: 20
});
canvas.add(rect);
 </script>

If I use a separate script file:

<script src="/js/custom.js"></script>

It doesn’t work.

emccorson

You can still keep your pages in separate files (without the template tag). You can then put the script files in your main index.html file and when your separate page is loaded into the main file, you should be able to access it.

LittleOldLady

@emccorson

Thank you for trying to help me. It didn’t work for me. I’ve tried placing the <script> file reference in my index.html. Then I tried placing it in both pages. The only way I can get the script recognized in the page is to write it out there. I guess I’ll just use the <script> tag and actual javascript within the page and deal with it. I’ll probably stumble onto the solution eventually. I tinker with onsen-ui but I’m a LONG way from knowledgeable.

I appreciate the way your try to help.
-R

emccorson

If you can put a minimal example on GitHub then I can take a look at it. At the moment, I’m not understanding what your code is supposed to do so I can’t fully answer.

via-lars

Hello,

I came here looking for what I guess is a solution to the same problem.

ons-navigator supports pushPage(id, options).

id can be the path and name of a separate (template/)file.

options can be a JS object passed into that file.

But how can one specifiy the JS which uses the options in that file? I would use an event like init from https://onsen.io/v2/api/js/ons-page.html#lifecycle (I just remembered the note from https://onsen.io/v2/guide/fundamentals.html#the-ons-object).

According to the attempts by @LittleOldLady , the JS has to be placed inside the ons-page in that template inline, it cannot be referenced as a separate file from there? I just tested this, referencing a file by src indeed does not work.

So a solution is to have all code in one or more JS files referenced from index.html and to use a one-liner like
ons.getScriptPage().onInit = myFunctionCoveringTheCodeForThePageLoadedHere;
inside the script in that template/file/page inline.
Or use the

document.addEventListener('init', function(event) {
  var page = event.target;
  if (page.matches('#id') {    // id as in passed to pushPage()
    myFunctionCoveringTheCodeForThePageLoadedHere();  // Set up page's dynamic content or behavior
  }
});

way. (Note the listener is bound to document and acts on the bubbled up JS events.)

Any benefits/tradeoffs you know of you are willing to share?

gobiyau

I have tried LoadJS in my projects, it works fine with OnsenUI.

Best Regards
Gobi

passaas3

Thank you for trying to help me. It didn’t work for me
vidmate apk

mobdro download

gobiyau

Hi,

I write a simple example for you. The first page is index.html and second page is page2.html

index.html

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Onsen UI Demo</title>

    <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
    <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
    <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
    <script src="https://unpkg.com/loadjs@latest/dist/loadjs.min.js"></script>
</head>


<body>

    <ons-navigator swipeable id="myNavigator">
        <ons-page id="page1">
            <ons-toolbar>
                <div class="center">Page 1</div>
            </ons-toolbar>

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

            <ons-button onclick="pushPage('page2.html')">Push page</ons-button>
        </ons-page>
    </ons-navigator>

    <script>
        function pushPage(page) {
            document.querySelector('#myNavigator').pushPage(page);
        }
    </script>

</body>

</html>

The index.html is a very simple Onsen UI page, just have a function pushpage.

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>
    <div class="div-card">
        <img id="barcode" />
        <div class="div-text">お会計時に会員バーコードをご提示ください。</div>
    </div>
    <style>
        .div-card {
            position: relative;
            box-sizing: border-box;
            margin: 20px auto;
            width: 320px;
            height: 198px;
            border-radius: 16px;
            background-color: #00569b;
            box-shadow: 0 4px 4px #888;
            text-align: center;
        }

        .div-card img {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }

        .div-card .div-text {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 14px;
            font-size: 12px;
            color: #fff;
        }

    </style>
    <script>
        ons.getScriptPage().onInit = function() {
            if (!loadjs.isDefined('jsBarcode')) {
                loadjs('https://cdnjs.cloudflare.com/ajax/libs/jsbarcode/3.11.4/JsBarcode.all.min.js', 'jsBarcode', function() {

                });
            }

            loadjs.ready('jsBarcode', function() {
                // foo.js & bar.js loaded
                JsBarcode("#barcode")
                    .CODE128("1234567890123456", {
                        height: 80,
                        marginLeft: 20,
                        marginRight: 20,
                        text: "1234-5678-9012-3456",
                        fontSize: 14
                    })
                    .render();
            });
        };

    </script>
</ons-page>

I didn’t place <script src=‘https://cdnjs.cloudflare.com/ajax/libs/jsbarcode/3.11.4/JsBarcode.all.min.js’></script> in index.html header, but I let loadjs load it when the page2.html is pushed.

If jsBarcode is not yet loaded then load it. when loadjs is ready, the do the command.

Onsen can only run multi-pages in server mode. I put this examples in following link.

Best Regards
Gobi

liverme45

I appreciate the way your try to help.

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.

Where to place custom.js file for separate html page?