Ionic InAppBrowser打开JSON字符串URL报错求助

看起来你的问题核心是URL缺少协议前缀（http/https），导致InAppBrowser把目标网址当成了本地相对路径，自动拼接了你的开发服务器地址（http://localhost:8104/），才出现了http://localhost:8104/www.myjsonstringurl.com这种错误地址。

我给你两种可行的解决办法：

1. 直接修正JSON数据源 #

检查你用来展示的JSON数据，确保每个网站的URL字段都以http://或者https://开头。比如把www.myjsonstringurl.com改成https://www.myjsonstringurl.com，这样InAppBrowser就能识别这是一个外部网址，不会当成本地路径处理。

2. 在代码中动态补全协议前缀 #

如果没办法修改原始JSON数据，你可以在触发跳转的onClick事件处理函数里，自动给缺少协议的URL加上前缀。举个Ionic项目里的示例代码：

假设你的列表项点击事件是这样写的：

// 导入InAppBrowser
import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';

constructor(private iab: InAppBrowser) {}

// 处理跳转的函数
openExternalUrl(url: string) {
  // 判断URL是否已经包含http/https前缀
  const fullUrl = url.startsWith('http') ? url : `https://${url}`;
  // 打开外部浏览器
  this.iab.create(fullUrl, '_blank');
}

在你的HTML模板里，列表项的点击事件调用这个函数：

<ion-list>
  <ion-item *ngFor="let item of resourcesList" (click)="openExternalUrl(item.url)">
    <h2>{{item.siteName}}</h2>
    <p>{{item.url}}</p>
  </ion-item>
</ion-list>

这样处理后，不管原始URL有没有协议前缀，都会被转换成完整的外部网址，InAppBrowser就能正确跳转了。最后测试一下，点击列表项后，地址栏应该显示完整的https://www.myjsonstringurl.com，而不是拼接了localhost的错误地址。

内容的提问来源于stack exchange，提问作者Tornado973