Webview not working in ios

alibahjat · 2018-07-27 20:16:04 UTC

hello
i got this problem the webview is not work in ios only it is shown white screen

it is only load firstWebViewSRC the code html

in android every thing working fine

my view is

 <GridLayout row="1" rows="100 *" columns="*">
       <WebView row="0" col="0" [src]="firstWebViewSRC"></WebView>
       <WebView row="1" col="0" [src]="secondWebViewSRC"></WebView>
   </GridLayout

my code is



import {Component, ViewChild, ElementRef} from "@angular/core";
import { RouterExtensions } from "nativescript-angular/router";
import { getString } from "tns-core-modules/application-settings/application-settings";
import { WebView, LoadEventData } from "ui/web-view";

@Component({
    selector: "map",
    templateUrl: "map.html",
    styleUrls: ["map.css"],
    moduleId: module.id 

})

export class MapComponent {

public firstWebViewSRC = '<!DOCTYPE html><html><head><title>MyTitle</title><meta charset="utf-8" /></head><body><span style="color:#0099CC; text-align: center;">First WebView</span></body></html>';

public secondWebViewSRC = 'https://www.youtube.com/';


    constructor(public routerExtensions:RouterExtensions) {

    }
  

}

manojdcoder · 2018-07-27 21:18:54 UTC

Did you try listening loadFinished event, it should give you an error description when failed.

alibahjat · 2018-07-27 22:33:05 UTC

thanks for answer
they are no problem with loading
because i got no error
the problem the webview is not shown in ios

manojdcoder · 2018-07-28 07:40:08 UTC

Can you reproduce the issue on Playground?

alibahjat · 2018-07-28 09:10:51 UTC

in Playground everything work fine

my package.json is

{
  "description": "NativeScript Application",
  "license": "SEE LICENSE IN <your-license-filename>",
  "readme": "NativeScript Application",
  "repository": "<fill-your-repository-here>",
  "nativescript": {
    "id": "com.ali.ali",
    "tns-android": {
      "version": "4.1.3"
    },
    "tns-ios": {
      "version": "4.1.0"
    }
  },
  "dependencies": {
    "@angular/animations": "~5.2.0",
    "@angular/common": "~5.2.0",
    "@angular/compiler": "~5.2.0",
    "@angular/core": "~5.2.0",
    "@angular/forms": "~5.2.0",
    "@angular/http": "~5.2.0",
    "@angular/platform-browser": "~5.2.0",
    "@angular/platform-browser-dynamic": "~5.2.0",
    "@angular/router": "~5.2.0",
    "nativescript-angular": "~5.3.0",
    "nativescript-app-tour": "^0.9.1",
    "nativescript-barcodescanner": "^2.7.7",
    "nativescript-carousel": "^3.1.1",
    "nativescript-fancyalert": "^1.2.0",
    "nativescript-gif": "^4.0.0",
    "nativescript-image-cache": "^1.1.6",
    "nativescript-image-swipe": "^3.0.0",
    "nativescript-image-zoom": "^3.0.0",
    "nativescript-loading-indicator": "^2.4.0",
    "nativescript-ng2-carousel": "0.0.5",
    "nativescript-ng2-slides": "0.0.11",
    "nativescript-onesignal": "^1.0.7",
    "nativescript-rotate-3d": "^0.8.0",
    "nativescript-theme-core": "~1.0.4",
    "nativescript-ui-sidedrawer": "^4.1.1",
    "nativescript-webkit-webview": "^1.0.5",
    "reflect-metadata": "~0.1.10",
    "rxjs": "~5.5.5",
    "tns-core-modules": "^4.1.1",
    "tns-core-modules-widgets": "^4.2.0",
    "tns-platform-declarations": "^4.1.0",
    "zone.js": "~0.8.18"
  },
  "devDependencies": {
    "@angular-devkit/core": "~0.6.3",
    "@angular/cli": "^6.0.8",
    "@angular/compiler-cli": "~5.2.0",
    "@ngtools/webpack": "~6.0.3",
    "babel-traverse": "6.26.0",
    "babel-types": "6.26.0",
    "babylon": "6.18.0",
    "clean-webpack-plugin": "~0.1.19",
    "copy-webpack-plugin": "~4.5.1",
    "css-loader": "~0.28.11",
    "extract-text-webpack-plugin": "~3.0.2",
    "lazy": "1.0.11",
    "nativescript-css-loader": "~0.26.0",
    "nativescript-dev-typescript": "~0.7.0",
    "nativescript-dev-webpack": "^0.12.0",
    "nativescript-worker-loader": "~0.9.0",
    "raw-loader": "~0.5.1",
    "resolve-url-loader": "~2.3.0",
    "typescript": "~2.7.2",
    "uglifyjs-webpack-plugin": "~1.2.5",
    "webpack": "~4.6.0",
    "webpack-bundle-analyzer": "~2.13.0",
    "webpack-cli": "~2.1.3",
    "webpack-sources": "~1.1.0"
  },
  "scripts": {
    "ns-bundle": "ns-bundle",
    "publish-ios-bundle": "npm run ns-bundle --ios --publish-app",
    "generate-android-snapshot": "generate-android-snapshot --targetArchs arm,arm64,ia32 --install",
    "start-android-bundle": "npm run ns-bundle --android --run-app",
    "start-ios-bundle": "npm run ns-bundle --ios --run-app",
    "build-android-bundle": "npm run ns-bundle --android --build-app",
    "build-ios-bundle": "npm run ns-bundle --ios --build-app"
  }
}

alibahjat · 2018-07-28 12:24:50 UTC

please help me to solve this problem

manojdcoder · 2018-07-28 12:42:32 UTC

Add a border to WebView to verify whether the component itself is failed or the URL.

alibahjat · 2018-07-28 13:07:58 UTC

the . border is shown

manojdcoder · 2018-07-28 13:56:45 UTC

So the WebView is displayed but not the web page. Let’s track it further, try adding loadFinished event and log all of it’s arguments value.

jibon57 · 2018-07-28 16:06:07 UTC

@alibahjat, did you try with different website or html file?

alibahjat · 2018-07-28 20:44:11 UTC

after i remove platform and update project the webview is working now
but no loading images