1. 首页
  2. 问答
  3. 在webview中如何使用javascript CSS样式访问HTML文件

在webview中如何使用javascript CSS样式访问HTML文件

2016-09-21 77 views
0

在我的WebView中，我需要加载HTML文件，它包含CSS和JavaScript代码。我以.html格式将该文件存储在assets文件夹中。它加载正确的webview甚至风格也很好显示，但问题是JavaScript部分不工作在web视图。 以下是我的代码，如果任何人都可以帮忙。在webview中如何使用javascript CSS样式访问HTML文件

HTML文件代码： -

<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代码： -

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

您可以检查以下链接它是在HTML格式，但对的WebView JavaScript特效做工作正常不行。

Like this need to work in Webview

如果任何人能帮助这将是巨大的。

来源

2016-09-21 YBDevi

+1

显然，jquery将不会被自动包含在内 – Selvin

+0

如果有人认为它没有被正确地评论，我会解释它。 – YBDevi

+0

我在活动中提到settings.setJavaScriptEnabled（true）;仍然不起作用。 – YBDevi

回答

1

在你的代码中存在导致web view中的问题的jquery。如果你想在webview中使用Java Script来执行关于HTML的任何操作。

下面的例子会给你你想要的效果。

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

试试这个例子它会工作。

来源

2016-09-22 12:01:25

+0

感谢这个例子，它帮助了很多我对JS和Jquery没有任何想法。 – YBDevi

相关问题

 相关问题