0

I have created a xamarin android application in which I want to show a slideshow in webview for which I have created Html variable and in the html I have used css and javascript. It is working in chrome browser when I browse it but in application, javascript doesn't work.

base.OnCreate(savedInstanceState);

            // Create your application here
            SetContentView(Resource.Layout.WebView);

            webView = FindViewById<WebView>(Resource.Id.webView);
            webView.SetWebChromeClient(new WebChromeClient());
            webView.SetWebViewClient(new WebViewClient());
            webView.ClearCache(true);
            webView.ClearHistory();
            webView.Settings.JavaScriptEnabled = true;
            webView.Settings.JavaScriptCanOpenWindowsAutomatically = true;

//Can't provide html code due to security reasons. webView.LoadData(html, "text/html", null);

Prasad Sathe
  • 1
  • The best way to Debug an Android application is to launch logcat and then navigate to the app and try to switch your slider and see the error being thrown to the logcat –  Feb 22 '23 at 12:07

1 Answers1

0

At first, please make sure you have added this code into the AndroidManifest.xml to get the internet permission.

<uses-permission Android:name="Android.permission.INTERNET" />

And then you can try to use this code webView.Settings.DomStorageEnabled = true to set the property's value. The default value is false.

For more information, you can refer to this case which is about JavaScript not working in Android Webview

Update

I have tested your coded in your newest question and found the html will not render in my webview.

And then I change your html string to a html file and put it in the Assets folder:

<!DOCTYPE html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    * {box-sizing: border-box;}
    body {font-family: Verdana, sans-serif;}
    .mySlides {display: none;}
    img {vertical-align: middle;}

    /* Slideshow container */
    .slideshow-container {
      max-width: 100%;
      position: relative;
      margin: auto;
    }

    /* Number text (1/3 etc) */
    .numbertext {
      color: #f2f2f2;
      font-size: 12px;
      padding: 8px 12px;
      position: absolute;
      top: 0;
    }

    /* The dots/bullets/indicators */
    .dot {
      height: 15px;
      width: 15px;
      margin: 0 2px;
      background-color: #bbb;
      border-radius: 50%;
      display: inline-block;
      transition: background-color 0.6s ease;
    }

    .active {
      background-color: #717171;
    }

    /* Fading animation */
    .fade {
      animation-name: fade;
      animation-duration: 1.5s;
    }

    @keyframes fade {
      from {opacity: .4}
      to {opacity: 1}
    }

    </style>
</head>

<body>
<div class="slideshow-container">

<div class=mySlides fade>
  <div class=numbertext">1 / 3</div>
  <img src="test.jpg" style="width:100%">  
</div>

<div class="mySlides fade">
  <div class="numbertext">2 / 3</div>
  <img src="test11.png" style="width:100%">  
</div>

<div class="mySlides fade>
  <div class="numbertext">3 / 3</div>
  <img src="test22.png" style="width:100%">  
</div>

</div>
<br>

<div style="text-align:center">
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
</div>

<script type="text/javascript">
    let slideIndex = 0;
    showSlides();

    function showSlides() {
        let i;
        let slides = document.getElementsByClassName("mySlides");
        let dots = document.getElementsByClassName("dot");
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
        }
        slideIndex++;
        if (slideIndex > slides.length) { slideIndex = 1 }
        for (i = 0; i < dots.length; i++) {
            dots[i].className = dots[i].className.replace("active", "");
        }
        slides[slideIndex - 1].style.display = "block";
        dots[slideIndex - 1].className += "active";
        setTimeout(showSlides, 2000); // Change image every 2 seconds
    }
</script>
</body>
</html>

The project picture:

enter image description here

And then use the webView.LoadUrl("file:///android_asset/file.html"); to load the html file.

In addition, in your code the if (!string.IsNullOrEmpty(NonMeetingLeftPath)) should be if (string.IsNullOrEmpty(NonMeetingLeftPath)), because the NonMeetingLeftPath is empty. The webView.Load will not excuted.

Liyun Zhang - MSFT
  • 8,271
  • 1
  • 2
  • 14
  • Thank you so much for your reply. I have checked in the AndroidManifest.xml. this line is already set there. Also used webView.Settings.DomStorageEnabled = true this line but still issue is not resolved. – Prasad Sathe Feb 22 '23 at 09:20
  • So the problem should be the javascript file, you can check this case about [Android webview load local javascript](https://stackoverflow.com/questions/6533207/android-webview-load-local-javascript). @PrasadSathe – Liyun Zhang - MSFT Feb 22 '23 at 09:29
  • Still not working. – Prasad Sathe Feb 22 '23 at 10:15
  • https://stackoverflow.com/questions/75531819/javascript-doesnt-enable-in-webview-xamarin-android – Prasad Sathe Feb 22 '23 at 11:03
  • In the above link I have created a new query and given the sample code and output I'm getting in the normal browser and in application – Prasad Sathe Feb 22 '23 at 11:05
  • You can check the updated part in my answer. I have tested it, the image will changed every two second. @PrasadSathe – Liyun Zhang - MSFT Feb 23 '23 at 03:03