json - ionic inAppBrowser 打开 json 字符串 URL
问题描述
我正在尝试构建一个列表视图,该视图显示带有网站名称和 url 的 JSON 数据。一切都很好。但是当我把onclick转到inAppBrowser时它给了我一个错误
下方地址栏
http://localhost:8104/www.myjsonstringurl.com
在它显示的窗口中
无法获取/网址
这是我的 resources.html 页面的代码
<ion-header>
<ion-navbar>
<ion-title>Resources & Information</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-item><p text-wrap>Our Resources page will take you to Mobile Devices default browser.</p></ion-item>
<!--
<ion-item><p text-wrap>Our Resources page will offer adding new resources and finding a team your area.</p></ion-item>
<ion-buttons>
<button ion-button full large color="secondary" style="color: #000000;">Add a resource!</button>
<button ion-button full large color="secondary" style="color: #000000;">Find a team in your area!</button>
</ion-buttons> -->
<ion-list>
<button ion-item detail-none *ngFor="let item of filteredList" (click)="openWithSystemBrowser(item.post.URL)">
<h4 text-wrap>{{item.post.Name}}</h4>
<p>{{item.post.URL}}</p>
</button>
</ion-list>
</ion-content>
我的ts代码
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { DataProvider } from '../../providers/data/data';
import { InAppBrowser, InAppBrowserOptions } from "@ionic-native/in-app-browser";
@IonicPage()
@Component({
selector: 'page-resources',
templateUrl: 'resources.html',
})
export class ResourcesPage {
url: any[];
tournments: any[];
filteredList = [];
listType = 'all';
options : InAppBrowserOptions = {
location : 'yes',//Or 'no'
hidden : 'no', //Or 'yes'
clearcache : 'yes',
clearsessioncache : 'yes',
zoom : 'yes',//Android only ,shows browser zoom controls
hardwareback : 'yes',
mediaPlaybackRequiresUserAction : 'no',
shouldPauseOnSuspend : 'no', //Android only
closebuttoncaption : 'Close', //iOS only
disallowoverscroll : 'no', //iOS only
toolbar : 'yes', //iOS only
enableViewportScale : 'no', //iOS only
allowInlineMediaPlayback : 'no',//iOS only
presentationstyle : 'pagesheet',//iOS only
fullscreen : 'yes',//Windows only
};
constructor(
private navCtrl: NavController,
private dataProvider: DataProvider, private inAppBrowser: InAppBrowser, private theInAppBrowser: InAppBrowser) {
this.dataProvider.getResource().subscribe((data: any) => {
this.tournments = data.posts;
this.filteredList = this.tournments;
});
}
public openWithSystemBrowser(tournament: string){
let target = "_system";
this.theInAppBrowser.create(tournament,target,this.options);
}
public openWithInAppBrowser(url : string){
let target = "_blank";
this.theInAppBrowser.create(url,target,this.options);
}
public openWithCordovaBrowser(url : string){
let target = "_self";
this.theInAppBrowser.create(url,target,this.options);
}
openWebpage(url: string) {
const options: InAppBrowserOptions = {
zoom: 'yes',
toolbar: 'yes',
enableViewportScale: 'yes',
}
// Opening a URL and returning an InAppBrowserObject
const browser = this.inAppBrowser.create(url, '_system', options);
console.log(url);
console.log(browser);
console.log("link viewed");
// Inject scripts, css and more with browser.X
}
/**
* open Resoures detail page
*
* @param tournament
*/
openResourcePage(tournament: any) {
this.navCtrl.push('ResourceDetailPage', {tournament: tournament});
}
/**
* search by text
*/
onSearch(event: any) {
const searchText = event.target.value.toLowerCase();
this.filteredList = this.tournments.filter(item => {
if ((item.post.NAME as string).toLowerCase().indexOf(searchText) > -1) {
return true;
}
return false;
});
}
segmentChanged(event: any) {
this.dataProvider.getResource(event.value).subscribe((data: any) => {
this.tournments = data.posts;
this.filteredList = this.tournments;
});
}
}
当我输入 twitter.com 之类的网址时,它可以正常工作。json 字符串具有完整地址http://url
有人可以帮忙吗。它不适用于浏览器、IOS 或 Android 模拟器
解决方案
对于您传递给您的方法的选项,一种可能性是不正确context
的。this
this.options
inAppBrowser.create()
尝试将您的选项定义为课程的上下文let
或const
在课程的上下文中。
public openWithInAppBrowser(url : string){
let theOptions = this.options;
let target = "_blank";
this.theInAppBrowser.create(url,target,theOptions);
}
推荐阅读
- jquery - 如何重置引导下拉列表中的所有复选框
- jsonschema - Python jsonschema 无法验证 JSON 模式条件嵌套属性
- teradata - 在 tera 数据中删除一个外部表向我显示一条奇怪的消息。我不能放下它
- c - 编写插入代码时C中的分段错误
- testng - TestNg:如果配置方法失败(@AfterSuite),有什么方法会使测试失败
- r - 如何仅使用列表名称创建 selectInput?(不显示列表内容)闪亮
- django - 无效的 HTTP_HOST 标头:根据 RFC 1034/1035,提供的域名无效
- java - Drools worker 线程花费太多时间,抛出 sun.nio.fs.UnixException
- reactjs - 从组件路由到主组件
- python - PIL:将图像粘贴到透明图像上而不破坏背景像素