Javascript doesnt enable in webview xamarin android

Question

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

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 — user21078216
– user21078216, Commented Feb 22, 2023 at 12:07

Liyun Zhang - MSFT · Accepted Answer · 2023-02-23 03:02:35Z

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:

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.

edited Feb 23, 2023 at 3:02

answered Feb 22, 2023 at 8:31

Liyun Zhang - MSFT

15.3k1 gold badge10 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Prasad Sathe Over a year ago

Thank you so much for your reply. I have checked in the AndroidManifest.xml. <uses-permission Android:name="Android.permission.INTERNET" /> this line is already set there. Also used webView.Settings.DomStorageEnabled = true this line but still issue is not resolved.

Liyun Zhang - MSFT Over a year ago

So the problem should be the javascript file, you can check this case about Android webview load local javascript. @PrasadSathe

Prasad Sathe Over a year ago

Still not working.

Prasad Sathe Over a year ago

stackoverflow.com/questions/75531819/…

Prasad Sathe Over a year ago

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

|

Collectives™ on Stack Overflow

Javascript doesnt enable in webview xamarin android

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related