javascript 如何在ionic 3中使用jquery

How to use jquery in ionic 3

提问by Dominic Francis

I'm trying to load external website in a div using jquery in ionic 3.

我正在尝试使用 ionic 3 中的 jquery 在 div 中加载外部网站。

TS:

TS：

export class HomePage 
{
  constructor(public navCtrl: NavController) {    
      $('#loadExternalURL').load('http://www.google.com');
  }
}

HTML:

HTML：

<ion-content>
    <div id="loadExternalURL"></div>
</ion-content>

I'm getting blank screen on serving the ionic app. Is there anything I'm missing? Any Suggestion?

我在为 ionic 应用程序提供服务时出现空白屏幕。有什么我想念的吗？有什么建议吗？

回答by pgcan

I did it in following way,

我是按照以下方式做的，

1. Install Jquery module in your IONIC-3 app,

   npm install jquery --save

2. Import JQuery in HomePage.ts

   import * as $ from "jquery";

3. Use $ to call jquery methods.

1. 在您的 IONIC-3 应用程序中安装 Jquery 模块，

   npm 安装 jquery --save

2. 在 HomePage.ts 中导入 JQuery

   import * as $ from "jquery";

3. 使用 $ 调用 jquery 方法。

I wait for method ngAfterViewInit to make sure view is initialized.

我等待方法 ngAfterViewInit 以确保视图已初始化。

ngAfterViewInit(){
    $(document).ready(function(){
        alert('JQuery is working!!');
    });
}

回答by Abayomi Apetu

To use jQuery in ionic project do it this way:

要在 ionic 项目中使用 jQuery，请这样做：

Install the Jquery module in your IONIC-3 app as follows:

在您的 IONIC-3 应用程序中安装 Jquery 模块，如下所示：

1, npm install jquery --save
2, npm install @types/jquery

then import jquery on your page like this

然后像这样在您的页面上导入 jquery

3, import * as $ from "jquery";

You can then use the jquery $ as you would in normal javascript. I have used it for a jquery ajax call to get remote data like this:

然后，您可以像在普通 javascript 中一样使用 jquery $。我已经将它用于 jquery ajax 调用来获取这样的远程数据：

 $.ajax({
    url: "my api url",
    method: "POST", //you can do post, get, put
    data: my-data
}).done(function(res){
     //process response from server
}).fail(function(err){
     //return error message.
});

It worked very fine.

它工作得很好。

回答by Mitch Wilkins

You need to import jQuery into your project somehow. If you want to use HTML you need to add it near the top of your page

您需要以某种方式将 jQuery 导入到您的项目中。如果您想使用 HTML，您需要将其添加到页面顶部附近

<script src="[path to jQuery source]"></script>

Or use a .d.ts file defining jQuery

或者使用定义 jQuery 的 .d.ts 文件

declare module "jquery" {
    export = $;
}
declare var jQuery: JQueryStatic;
declare var $: JQueryStatic;

then define it where needed

然后在需要的地方定义它

<reference path="jquery.d.ts" />

References used:

使用的参考资料：

TypeScript and libraries such as jQuery (with .d.ts files)

TypeScript 和 jQuery 等库（带有 .d.ts 文件）

How do I get jQuery autocompletion in TypeScript?

如何在 TypeScript 中获得 jQuery 自动完成功能？

回答by Kathrecha Krishna

You not need to use jQuery

你不需要使用 jQuery

You can add iframe

您可以添加 iframe

<div>
    <iframe src="yourexternalpage url"></iframe>
</div>