首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在ionic 3中导航到其他页面后,index.html中的js脚本不起作用

在Ionic 3中导航到其他页面后,index.html中的JS脚本不起作用的原因是Ionic使用了单页面应用(SPA)的架构,通过路由导航来加载不同的页面。当导航到其他页面后,原来的index.html页面并不会重新加载,因此其中的JS脚本也不会重新执行。

解决这个问题的方法是将需要在其他页面中使用的JS脚本放在对应页面的.ts文件中,并在该页面的生命周期钩子函数中执行相应的逻辑。Ionic提供了一些生命周期钩子函数,如ionViewDidLoad、ionViewWillEnter等,可以根据需要选择合适的钩子函数来执行JS脚本。

另外,如果需要在多个页面中共享某些JS脚本,可以考虑将这些脚本封装成服务(Service),并在需要使用的页面中注入该服务,以实现代码的复用。

以下是一个示例代码,演示了在Ionic 3中如何解决导航到其他页面后index.html中JS脚本不起作用的问题:

  1. 在需要使用JS脚本的页面的.ts文件中定义一个函数或方法,例如:
代码语言:typescript
复制
import { Component } from '@angular/core';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor() {}

  ionViewDidLoad() {
    this.executeScript();
  }

  executeScript() {
    // 在这里编写需要执行的JS脚本逻辑
  }

}
  1. 在需要导航到该页面的地方调用导航方法,例如:
代码语言:typescript
复制
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { HomePage } from '../home/home';

@Component({
  selector: 'page-other',
  templateUrl: 'other.html'
})
export class OtherPage {

  constructor(public navCtrl: NavController) {}

  navigateToHomePage() {
    this.navCtrl.push(HomePage);
  }

}

通过以上方法,可以在导航到其他页面后执行相应的JS脚本逻辑。请注意,以上示例仅为演示目的,实际应用中需要根据具体需求进行适当的修改。

对于Ionic 3中导航和页面生命周期的更多信息,可以参考Ionic官方文档:https://ionicframework.com/docs/navigation/

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Ionic 2 应用剖析0 开始之前1 创建一个新Ionic 2 应用2 目录结构3. Class 定义Root Components 模版App Module总结

我们用于加载其他组件或服务这个组件。...为构造函数定义每一个页面创建一个按钮,号语法意味这它将为每个页面创建一个嵌入式模版(它不会在DOM渲染出上面的代码,而是使用模版创建),通过使用let p我们可以获取到某个特定页面的引用,用于点击事件时传递...页面 根组件是一个特例,我们通过 ListPage组件来看看如何添加一个普通视图一个Ionic2应用程序。...(根组件通过openPage方法设置),我们没用通过navigation stack导航这个页面。...Ionic 2 ,如果你想添加一个视图,并且保存页面导航历史随时可以返回,那么你需要push这个页面n navigation stack,对应移除用pop。

4.4K50

Wijmo 5 + Ionic Framework之:Hello World!

Git Node.js Bower Apache Cordova 本教程,我们使用Chrome用于开发、调试,同时,你也可以Android和IOS设备上用其他浏览器来调试。...工程文件夹www/lib目录,包含了该app所要依赖库文件。 Wijmo 5下载源码路径概图: ? Iconic目录浏览截图: ?...index.html 文件,并未直接引用AngularJs文件,这个是因为Ionicionic.bundle.js文件)已经包含了AngularJs和其依赖,如UI-Router,故不需要直接引用了...使用Wijmo 5 下面给Index.HTML文件添加Wijmo 5控件,先需要在www/js/app.js文件添加Wijmo模块依赖——‘wj’。...index.html文件 元素,共引入了3个IconAngularJS 指令:, , 和。

2.1K60

实战使用Axure设计App,使用WebStorm开发(3) – 构建页面架构

git checkout TheInitialProject 本App,咱们采用了 Ionic 作为基础工程框架,Ionic 是基于 AngularJS 来构建,所以第一步就是先把页面路由和URL... js 目录下添加 services.js 和 controllers.js 并在 index.html添加引用。..., [ionic, ddApp.services, ddApp.controllers]) d) index.html添加 Javascript 文件引用 <script src="<em>js</em>/app.<em>js</em>...<em>到</em>这一步您可以执行以下 <em>ionic</em> serve <em>ionic</em> serve <em>在</em>浏览器里看看现在<em>的</em><em>页面</em>情况 2....b) 修改 controller.<em>js</em> 添加空<em>的</em> Controller 当 templates 下对应<em>的</em> html 创建完成<em>后</em>,需要在 controllers.<em>js</em> 下为每个<em>页面</em>先写一个空<em>的</em> controller

1.7K70

Spring Boot 之 MVC1、新建工程2、依赖更新3、编写Controller4、准备Model数据,映射请求路径5、配置JSP模版6、渲染输出

总结 Ionic 2 添加页面 创建页面 创建附加页面 使用 Ionic 2 开发Todo应用 0 开始之前 1 创建新Ionic 2工程 2....我们需要一个列表 3.获取远程数据 4.推送数据服务器 总结 Ionic 2 样式与主题 Ionic 2主题简介 创建Ionic 2应用主题方式 没有苹果电脑打包iOS平台...2使用百度地图和Geolocation 新建项目 加入百度地图SDK库 加载地图 获取定位 坐标转换 地图定位 激活百度地图导航 总结 Ionic 2 Native中使用Cordova...安装Chart.js 3. 模版中使用 总结 Ionic 2 创建一个闪视卡片组件 1. 创建一个新应用作为例子 2. 什么是组件? 3. 创建组件模版 4....添加组件模版 总结 Ionic 2 创建一个照片倾斜浏览组件 1. 创建一个新应用 2. 实现照片倾斜浏览组件 3.

2.8K50

【开发指南】(六)Ionic3从目录结构理解开发

image.png 对比目前其它流行js框架,个人觉得其分工明确、清晰好理解,我觉得就算一开始头脑一遍空白新手,对他讲解过一次都能有个大致印象。...ionic命令行生成为原始静态html页面,并存放在www目录(见上图所示),也就是说www开发过程是不需要理,可以任意删除。...当我们想部署网页时,只需把www目录拷贝网站服务器上即可;当我们想打包app时,命令行执行打包指令会生成一个调用浏览器插件原生项目,同时把www目录拷贝项目中,浏览器插件入口网页指向wwwindex.html...,从而在app实现本地浏览网页效果,其中页面脚本等因为是本地就不需要网上加载,在数据加载过程中就已经可以看到页面,等数据加载完成自动局部刷新页面即可,这就是ionic运行机理,也是混合式应用其中一种常见套路...而压缩打包混淆等都是ionic框架内部处理了,所以我们只需专注于页面的实现,那最最简单开发步骤就是,pages里面新建一个页面,写好逻辑,然后app.module.ts添加配置即可。

2.7K10

Ionic2 Rest 认证1、创建Ionic 2 APP2、创建服务3、创建登陆和注册页面4、登出和token检查

我们需要一个列表 3.获取远程数据 4.推送数据服务器 总结 Ionic 2 样式与主题 Ionic 2主题简介 创建Ionic 2应用主题方式 没有苹果电脑打包iOS平台...2使用百度地图和Geolocation 新建项目 加入百度地图SDK库 加载地图 获取定位 坐标转换 地图定位 激活百度地图导航 总结 Ionic 2 Native中使用Cordova...安装Chart.js 3. 模版中使用 总结 Ionic 2 创建一个闪视卡片组件 1. 创建一个新应用作为例子 2. 什么是组件? 3. 创建组件模版 4....添加组件模版 总结 Ionic 2 创建一个照片倾斜浏览组件 1. 创建一个新应用 2. 实现照片倾斜浏览组件 3....progress-bar/progress-bar.ts如下: 3.使用这个组件 总结 使用VS CodeChrome调试Ionic 2 优化你Ionic2应用 打开Angular产品模式

3.7K30

IonicHybrid跨终端应用程序开发方案研究

,大多用于Java环境软件开发。...这里用到是用于android签名证书等打包(android开发过程ide使用gradle配置打包,早期都是用ant打包,这里使用方法比较原始) http://ant.apache.org/bindownload.cgi...,http://developer.android.com/sdk/installing/index.html 下载解压到某个目录(例如D盘),然后添加系统环境变量 ANDROID_HOME D:...5.总结分析 优势 大量可参考组件和文档,使得开发入门成本比较低 兼容angular(当然自己也可以用其他,只是默认创建项目时引入了angular) 整理来说,ionic方案仍然集中hybrid...开发集成化,对于快速开发内嵌页面来说是很好选择 前端人员除了搭环境,不需要了解过多客户端知识,就可以开发hybrid跨终端app了 可能存在不足: 直接将页面打包发布会使得迭代不好解决,如果使用离线包机制可以解决这一问题

1.6K10

IonicHybrid跨终端应用程序开发方案研究

,大多用于Java环境软件开发。...这里用到是用于android签名证书等打包(android开发过程ide使用gradle配置打包,早期都是用ant打包,这里使用方法比较原始) http://ant.apache.org/bindownload.cgi...,http://developer.android.com/sdk/installing/index.html 下载解压到某个目录(例如D盘),然后添加系统环境变量 ANDROID_HOME D:...5.总结分析 优势 大量可参考组件和文档,使得开发入门成本比较低 兼容angular(当然自己也可以用其他,只是默认创建项目时引入了angular) 整理来说,ionic方案仍然集中hybrid...开发集成化,对于快速开发内嵌页面来说是很好选择 前端人员除了搭环境,不需要了解过多客户端知识,就可以开发hybrid跨终端app了 可能存在不足: 直接将页面打包发布会使得迭代不好解决,如果使用离线包机制可以解决这一问题

2.2K80

手把手教你从无有写一个运维APP

总而言之,我们需要五个模板,所以 www 目录下创建了一个 tpls 目录用于放置我们模板文件。 完整源代码,可以访问我 GitHub。 2. 页面框架编写。...绘图 这里绘图使用 chart.js 2. 安装 chart.js 项目目录下执行下面命令 3. index.html 引入 js 文件 4....检索 es 我们感兴趣字段 通过检索 mapping 效果如下 个人而言,感觉可玩是 clientip,agent,response 我们利用 es api 统计以下上面的字段吧。...绘图 (六) 自问自答 Q:为毛不用最新 ionic A:暂时没有看 typescript 看法 Q:能画其他图么?...本文下方留言 点赞前两名 即可分别获赠精美图书一本 点赞统计截止 2017年8月14日(明日)8:00 (重复中奖无效) 奖品介绍 《Linux Shell脚本攻略(第2版)》 Linux Shell

1.3K60

Spring Boot 之 Spring Data JPA(一)1、新建工程2、配置数据库3、代码结构4、从数据逻辑总结

总结 Ionic 2 添加页面 创建页面 创建附加页面 使用 Ionic 2 开发Todo应用 0 开始之前 1 创建新Ionic 2工程 2....我们需要一个列表 3.获取远程数据 4.推送数据服务器 总结 Ionic 2 样式与主题 Ionic 2主题简介 创建Ionic 2应用主题方式 没有苹果电脑打包iOS平台...2使用百度地图和Geolocation 新建项目 加入百度地图SDK库 加载地图 获取定位 坐标转换 地图定位 激活百度地图导航 总结 Ionic 2 Native中使用Cordova...安装Chart.js 3. 模版中使用 总结 Ionic 2 创建一个闪视卡片组件 1. 创建一个新应用作为例子 2. 什么是组件? 3. 创建组件模版 4....添加组件模版 总结 Ionic 2 创建一个照片倾斜浏览组件 1. 创建一个新应用 2. 实现照片倾斜浏览组件 3.

4.5K50

前端Js框架汇总

也就有了茶余饭后也把了解知识整理一下。看过“你知识需要管理”,强烈意识杂乱且范范知识储备远不如整理条理清晰知识带来好处多。...那些后端程序员们根本不操心具体数据是如何从一个页面传递另一个页面的,他们也不用管用户数据更新是通过Ajax异步获取还是通过刷新页面。 3....页面顶层标签含有一个特殊属性data-main,require.js使用它来启动脚本加载过程,而baseUrl一般设置与该属性相一致目录。 用途:模块化动态加载。 7....Ionic遵循视图控制模式,通俗理解和 Cocoa 触摸框架相似。视图控制模式,我们将界面的不同部分分为子视图或包含其他视图子视图控制器。然后视图控制器“驱动”内部视图来提供交互和UI功能。...一个很好例子就是标签栏(Tab Bar)视图控制器处理点击标签栏一系列可视化面板间切换。 浏览我们API文档来了解视图控制器和Ionic可用Javascript实用工具。

6.4K30

Vue+Ionic4,知虎偏行(二)创建及配置项目

安装ionic相关依赖(其中@ionic/core是组件部分,@ionic/vue是封装成Vue方式调用接口部分): npm i @ionic/core @ionic/vue 安装完成main.js...添加配置: import Ionic from '@ionic/vue'; import '@ionic/core/css/ionic.bundle.css'; Vue.use(Ionic); 再次运行...' 同时页面也会报错,显示空白页面,这是一个BUG(前期版本是没有这个BUG),我们需要安装ionicons,而且它对版本有要求,要在V4.5.10以下,所以执行: npm i ionicons...important; } 此时页面看到有东西了,那我们尝试下ionic组件能不能用,Home.vue页面添加一个按钮: 测试</ion-button...为了支持Ionic路由和使用其动画和样式,@ionic/vue里vue-router基础上做了封装,所以处理一下,打开router.js,修改一下(把Router替换为IonicVueRouter

4.3K41

【开发指南】(三)认识ionic3

;第二代以React Native为代表,业务及虚拟页面通过js实现,然后通过js桥接,使用原生界面渲染,也就是说,它比第一代增强了页面显示功能,等到第三代了,通过编译时把js桥接部分也省掉,直接生成原生可执行代码...而平常所听到跨平台开发,一般指的是混合式开发。 ---- 此文中主角Ionic,就是Hybird技术第一代代表,有人会问,既然都发展第三代了,还有必要学习吗?...@IonicPage装饰器 ionic2导航器不是基于url,如果想使用url访问就要通过DeepLinker来实现,这是比较麻烦,而在新版本可以通过@IonicPage装饰器来实现。...并且可以更轻松项目中设置延迟加载,设置延迟加载页面的优先级,并为每个页面自定义配置。...懒加载 Ionic3.0版本开始,支持了延迟加载,我们可以将某些模块设置为延时加载,只有用户打开相关页面的时候,这个模块所在js才会被下载,这样能减少用户初次下载文件大小。

2.7K40

Wijmo 5 + Ionic Framework之:费用跟踪 App

浏览开支历史记录 开支历史页面,提供了2个功能:浏览开支历史记录、删除开支记录。...基于这些数据, www\templates\history.tpl.htm文件ion-context指令内添加Ionicion-list指令,代码如下: <ion-view title="History...最后一个函数$scope.canel使用了UI Router<em>的</em> $state 服务,<em>导航</em><em>到</em>主<em>页面</em>。 运行app,截图如下: ?...ExpenseSvc.updateExpenses($scope.data.itemsEdited); // return to overview page $scope.cancel(); } }; // 取消方法 (如<em>导航</em><em>到</em>主<em>页面</em>...概述 修改app.routes.<em>js</em> 文件,从默认<em>的</em>history<em>页面</em><em>到</em>overview<em>页面</em>: $urlRouterProvider.otherwise('/app/history'); to: $

2.3K100

Ionic4与Ionic3部分比较

其实,Ionic2和Ionic3差别不大,而ionic4则变化比较大了,它支持angular、vue、react或其它任意js框架,甚至不使用js框架,它更像一个纯粹UI库。...;后者注重代码管控,好处是它允许您指定导航“方向”,这将有助于Ionic 正确显示页面过渡。...Angular在这方面有点特殊,由于Ionic / Angular过去已经紧密集成,因此Ionic特定Push/Pop导航已经存在并且正在被其应用程序的人们使用。...action-sheet-controller loading-controller …… 前面2个一般是有自定义UIionic3是可通过自定义组件注入ViewController来关闭窗口,...ionic4已经没有这个方法,改为通过监听事件或回调给外面的xxx-controller来关闭。

6.9K10

填一填用了半个月 ionic 遇到

A: lokiJS ,类 mongodb js 内存数据库,配合为 ionic 打造插件做持久化存储。 ---- Q: 不同 Android 手机上出现字体错位之类奇怪问题。...---- Q: gitignore 默认排除了 plugins 文件夹,团队其他人 clone 了项目缺少插件,一个一个装太麻烦。...clone 完可以使用 ionic state restore 命令快速恢复 ---- Q: Ionic(AngularJS) 中使用 Cordova 插件有那么点点不方便。...A: 两个系统策略不一样, Android 中有这个需求简单办法是参考该页 Android 文件系统布局,把文件从 Private 目录复制 Public 目录下再做操作。...需要关闭时,后来加入导航任意 view 设置 backView 为记录下来 view ,然后 back 。

1.7K40
领券