Webview not working in ios


#1

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) {

    }
  

}

#2

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


#3

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


#4

Can you reproduce the issue on Playground?


#5

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"
  }
}

#6

please help me to solve this problem


#7

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


#8


the . border is shown


#9

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.


#10

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


#11

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