Run js on the html file to which the tab bar is transitioned

I am using the OnsenUI tab bar, but I tried to use the data class of js because I wanted to display the date in the tab bar, but it didn't work.

In the html file to which the tab bar is transitioned

<script>
  valid day = new Date();
  document.write(today);
  </script>

It says, but it doesn't work at all.I tried alert, but it didn't work.Why is it supposed to be an html file?

Please let me know! Nice to meet you!

javascript monaca onsen-ui

2022-09-30 14:33

3 Answers

I think it's more AngularJS (jQlite) specification than OnsenUI.

AngularJS inline script in the included HTML template

jQlite does not support script tags.

index.html reads the jQuery tag first, but
There's an error.

"Onsen UI require jqLite.Load jQuery after loading AngularJS to fix this error.jQuery may break Onsen UI behavior."

2022-09-30 14:33

A script embedded in page2.html with a <script> tag will probably not work.
I can't say for sure because I haven't read the OnsenUI source, but I think the html associated with the tab bar is simply embedded in the main page with innerHTML, so the script embedded as a JavaScript specification does not work in this case.
As a solution, wouldn't it be safe to execute the desired code using the pageinit and postpush events on the page equivalent to page2.html in JavaScript loaded with index.html?

2022-09-30 14:33

There is not enough information, but is the HTML file only contained in the above script?
Onsen-UI must contain ons-page.
There is a Monaca sample called Onsen UI Tabbar, so
Why don't you create your own project and analyze the structure first?

addition:
Don't you use OnsenUI as if it were transitioning like normal HTML?
First, you cannot use document.write.
HTML>BODY>ONS-PAGE must be added to ONS-PAGE.

Also, onLoad does not always occur when you switch between tabs and load pages.

This is because index.html has not transitioned and
ONS-PAGE embedded in index.html and
ONS-PAGE is just toggling the display.

There are two ways to initialize a page on a tab page.
One is on-active-tab-changed in ons-tabbar to insert the switching function
The other is to initialize when loading each page
First of all, let me explain the latter.

If you want to upload on each page, you should be aware of AngularJS.

var module=ons.bootstrap('my-app', ['onsen']);
module.controller('page1_controller', function($scope){
	ons.ready(function(){
		valid day = new Date();
		$("#target").prepend(today.getDate());
	});
});

<!DOCTYPE HTML>
<html lang="ja"ng-app="my-app"><!--- Specify module name-->
	<head>
		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
	</head>
	<body>
		<ons-pageng-controller="page1_controller">!--- Assign a controller class -->
			<ons-toolbar><divid="target" class="center">Day</div></ons-toolbar> 
		</ons-page>
	</body>
</html>

It's not really a tab bar, but initialization in ons-page looks like this.
Also, the description varies depending on the version of OnsenUI, so please refer to the official documentation of OnsenUI.
If the page contains initialization, the page should be initialized when you switch tabs.

2022-09-30 14:33

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656