in webview how we can access HTML file with javascript CSS styles

Question

In my WebView i need to load HTML file it contain the CSS and JavaScript code both. And i store that file in assets folder in .html format. It loads correct in webview even styles also displaying well but problem is JavaScript part is not working in webview. Following is my code if anyone can help.

Html file code:-

   <html>

    <head>
        <style type="text/css">
            *{
            margin: 0; padding: 0;
            }
            body {
            font-size: 100%;
            }
            .accordion {
            width: 380px;
            margin: 20px auto;
            }
            .accordion h1, h2, h3, h4 {
            cursor: pointer;
            }
            .accordion h2, h3, h4 {
            font-family: "News Cycle";
            }
            .accordion h1 {
            padding: 15px 20px;
            background-color: #333;
            font-family: Georgia;
            font-size: 1.5rem;
            font-weight: normal;
            color: #1abc9c;
            }
            .accordion h1:hover {
            color: #4afcdc;
            }
            .accordion h1:first-child {
            border-radius: 10px 10px 0 0;
            }
            .accordion h1:last-of-type {
            border-radius: 0 0 10px 10px;
            }
            .accordion h1:not(:last-of-type) {
            border-bottom: 1px dotted #1abc9c;
            }
            .accordion div, .accordion p {
            display: none;
            }
            .accordion h2 {
            padding: 5px 25px;
            background-color: #1abc9c;
            font-size: 1.1rem;
            color: #333;
            }
            .accordion h2:hover {
            background-color: #09ab8b;
            }
            .accordion h3 {
            padding: 5px 30px;
            background-color: #b94152;
            font-size: .9rem;
            color: #ddd;
            }
            .accordion h3:hover {
            background-color: #a93142;
            }
            .accordion h4 {
            padding: 5px 35px;
            background-color: #ffc25a;
            font-size: .9rem;
            color: #af720a;
            }
            .accordion h4:hover {
            background-color: #e0b040;
            }
            .accordion p {
            padding: 15px 35px;
            background-color: #ddd;
            font-family: "Georgia";
            font-size: .8rem;
            color: #333;
            line-height: 1.3rem;
            }
            .accordion .opened-for-codepen {
            display: block;
            }
        </style>

    </head>

    <body>

  <aside class="accordion">
    <h1>News</h1>
    <div class="opened-for-codepen">
        <h2>News Item #1</h2>
        <div class="opened-for-codepen">
            <h3>News Item #1a</h3>
            <div>
                <h4>News Subitem 1</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

                <h4>News Subitem 2</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

                <h4>News Subitem 3</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>

            <h3>News Item #1b</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

            <h3>News Item #1c</h3>
            <div class="opened-for-codepen">
                <h4>News Subitem 1</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

                <h4>News Subitem 2</h4>
                <p class="opened-for-codepen">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
        </div>

        <h2>News Item #2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

        <h2>News Item #3</h2>
        <div>
            <h3>News Item #3a</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

            <h3>News Item #3b</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </div>

    <h1>Updates</h1>
    <div>
        <h2>Update #1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

        <h2>Update #2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

        <h2>Update #3</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

        <h2>Update #4</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>

    <h1>Miscellaneous</h1>
    <div>
        <h2>Misc. #1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

        <h2>Misc. #2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

        <h2>Misc. #3</h2>
        <div>
            <h3>Misc. Item #1a</h3>
            <div>
                <h4>Misc. Subitem 1</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

                <h4>Misc. Subitem 2</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

                <h4>Misc. Subitem 3</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
            <h3>Misc. Item #2a</h3>
            <div>
                <h4>Misc. Subitem 1</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

                <h4>Misc. Subitem 2</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
        </div>
    </div>
</aside>

  <script type="text/javascript" >
      var headers = ["H1","H2","H3","H4","H5","H6"];

      $(".accordion").click(function(e) {
      var target = e.target,
      name = target.nodeName.toUpperCase();

      if($.inArray(name,headers) > -1) {
      var subItem = $(target).next();

      //slideUp all elements (except target) at current depth or greater
      var allAtDepth = $(".accordion p, .accordion div").filter(function() {
      if($(this).parents().length >= depth && this !== subItem.get(0)) {
        return true;
      }
      });
      $(allAtDepth).slideUp("fast");

      //slideToggle target content and adjust bottom border if necessary
       subItem.slideToggle("fast",function() {
        $(".accordion :visible:last").css("border-radius","0 0 10px 10px");
       });
       $(target).css({"border-bottom-right-radius":"0", "border-bottom-left-radius":"0"});
         }
          });
     </script>
    </body>

</html>

MainActivity code:-

  protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Help_webview=(WebView)findViewById(R.id.web_view);
        WebSettings settings=Help_webview.getSettings();
        settings.setJavaScriptEnabled(true);

        Help_webview.loadUrl("file:///android_asset/dummy.html");
        Help_webview.loadUrl("javascript:theFunction('text')");

You can check on following link it is working fine in HTML format but on webview javascript effects do not work.

Like this need to work in Webview

if any one can help it will be great.

if anyone think it is not asked properly comment it i will explain.don't down vote. — YBDevi
– YBDevi, Commented Sep 21, 2016 at 6:32
i mention in activity settings.setJavaScriptEnabled(true); still it is not working. — YBDevi
– YBDevi, Commented Sep 21, 2016 at 6:33
There is no build-in $() function in javascript ... It is a part of jquery library — Selvin
– Selvin, Commented Sep 21, 2016 at 6:35

YBDevi · Accepted Answer · 2016-09-22 12:13:24Z

In your code there is Jquery which is causing the problem in web view.If you want to perform any operations regarding HTML in webview use Java Script.

Following example will give you same effect which you want.

 <html>

    <head>
        <script type="text/javascript" src="script.js"></script>

    </head>

    <body>
    <UL id="example_tree">
    <LI><span>Data</span>
  <UL>
    <LI><span>Data</span></LI>
    <LI><span>Data</span></LI>
    </UL></LI>
  <LI><span>Data</span>
  <UL>
    <LI><span>Data</span></LI>
    <LI><span>Data</span></LI>
  </UL></LI>
  <LI><span>Data</span>
  <UL>
    <LI><span>Data</span></LI>
    <LI><span>Data</span></LI>
    <LI><span>Data</span></LI>
    <LI><span>Data</span></LI>
  </UL></LI>
  <LI><span>Data</span>
  <UL>
    <LI><span>Data</span></LI>
    <LI><span>Data</span></LI>
    <LI><span>Data</span>
      <UL>
         <LI><span>Data</span></LI>
        <LI><span>Data</span></LI>
      </UL>
    </LI>
    <LI><span>Datas</span>
      <UL>
        <LI><span>Data</span>
          <UL>
            <LI><span>Data</span>
              </UL></LI>
          </UL>
        </LI>
      <LI><span>Data</span>
        <UL>
          <LI><span>Data</span>
            </UL>
          </LI>
        </UL>
    </LI>
    <LI><span>Data</span>
        <UL>
         <LI><span>Data</span></LI>
         <LI><span>Data</span></LI> 
          <LI><span>Data</span>
            <UL>
              <LI><span>Data</span></LI> 
              <LI><span>Data</span></LI> 
            </UL>
          </LI>
          <LI><span>Data</span>
            <UL>
               <LI><span>Data</span>
                 <UL>
                    <LI><span>Data</span></LI>
                    <LI><span>Data</span></LI>
                 </UL>
              </LI>
            </UL>
          </LI>
          <LI><span>Data</span>
            <UL>
              <LI><span>Data</span></LI>
                 </UL>
              </LI>
      </UL>
    </LI>
      <LI><span>Data</span>
  <UL>
    <LI><span>Data</span></LI>
    <LI><span>Data</span>
      <UL>
        <LI><span>Data</span></LI>
        <LI><span>Data</span></LI>
      </UL>
    </LI>
    <LI><span>Data</span></LI>
    <LI><span>Data Image</span></LI>
    <LI><span>DataPIN</span></LI>
    </UL>
    </LI>
     <LI><span>Data</span>
  <UL>
    <LI><span>Data</span></LI>
    <LI><span>Data</span></LI>
       </UL>
    </LI>
    <LI><span>Data</span>
  <UL>
    <LI><span>DataSettings</span></LI>
    <LI><span>Data</span></LI>
       </UL>
    </LI>
    <LI><span>Data</span>
  <UL>
    <LI><span>Data</span></LI>
    </UL>
    </LI>

            </UL>
    </LI>
</UL>

         <script type="text/javascript">
       var allSpan = document.getElementsByTagName('SPAN');
for(var i = 0; i < allSpan.length; i++){
    allSpan[i].onclick=function(){
        if(this.parentNode){
            var childList = this.parentNode.getElementsByTagName('UL');
            for(var j = 0; j< childList.length;j++){
                var currentState = childList[j].style.display;
                if(currentState=="none"){
                    childList[j].style.display="block";
                }else{
                    childList[j].style.display="none";
                }
            }
        }
    }
}
</script>
    </body>

</html>

Try this example it will work.

Thanks for this example it help a lot i don't have any idea about JS and Jquery.

Collectives™ on Stack Overflow

in webview how we can access HTML file with javascript CSS styles

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related