HTML / JS 下拉菜单按钮不会放在 Android Studio WebView 中
Posted
技术标签:
【中文标题】HTML / JS 下拉菜单按钮不会放在 Android Studio WebView 中【英文标题】：HTML / JS Dropdown Menu Button doesn't drop in Android Studio WebView 【发布时间】：2020-07-26 08:39:53 【问题描述】：我想要一个按钮，它会在 html 文件中下拉一些其他选项。我想从 android WebView 访问这个 HTML。在我的 PC 浏览器上，一切似乎都按预期工作，但每次我在 WebView 中尝试它时，它只会显示菜单栏的动画，但不会下拉无序列表。
这是它在 PC 上的样子
.header
background: #20211c;
.nav
padding-top:10px;
nav ul
position:absolute;
color:#29B08E;
margin:0;
padding:0;
width:wrap_content;
transform-origin:top;
transform: perspective(1000px) rotateX(-90deg);
transition:0.5s;
nav ul.active
transform: perspective(1000px) rotateX(0deg);
nav ul li
list-style:none;
color:white;
background-color: #29B08E;
.dropdown
display: inline;
padding-right:10px;
nav ul li a
display: block;
color:white;
padding: 10px;
text-align: center;
text-decoration: none;
border-bottom: 1px solid rgba(0,0,0,.2);
.inhalt
color:white;
.uberschrift
color:#CB4048;
button
font-family:tahoma;
color:white;
position:relative;
width:wrap_content;
height:wrap_content;
front-size:24px;
background:#20211c;
border: 2px;
border-color:white;
box-shadow: none;
outline: none;
.container
display: inline-block;
cursor: pointer;
.bar1, .bar2, .bar3
width: 35px;
height: 5px;
background-color: white;
margin: 6px 0;
transition: 0.4s;
.change .bar1
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
.change .bar2 opacity: 0;
.change .bar3
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
<DOCTYPE !html>
<html>
<head>
<meta charset="UTF-8">
<link rel = "stylesheet" href="style.css" type="text/css">
<body>
<nav>
<button>
<div class="container" onclick="myFunction(this)">
<p><strong>Menü</p>
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<script> function myFunction(x)
x.classList.toggle("change");
</script></button>
<ul>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
<li>Menu5</li>
</ul>
</div>
<script
src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function()
$("button").click(function()
$("nav ul").toggleClass("active");););
</script>
</nav>
</body>
</head>
</html>但正如我所说，在移动设备上它只是做动画。
Android Studio 代码：
public class MainActivity extends AppCompatActivity
WebView webView;
@SuppressLint("SetJavaScriptEnabled")
@Override
protected void onCreate(Bundle savedInstanceState)
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
String indexhtml ="file:///android_asset/index.html";
webView = (WebView) this.findViewById(R.id.wv_webview);
webView.setWebViewClient(new WebViewClient()
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url)
Log.i("WebView", "Attempting to load URL: " + url);
view.loadUrl(url);
return true;
);
WebSettings websetting = webView.getSettings();
websetting.setJavaScriptEnabled(true);
websetting.getJavaScriptCanOpenWindowsAutomatically();
webView.setWebChromeClient(new WebChromeClient());
webView.loadUrl(indexhtml);
自己解决了， 必须通过 AndroidManifest.xml 授予对 android 应用程序的访问权限。
【问题讨论】：
@Sandeep 是的，我做了，我将我的 android studio 代码编辑到线程中 【参考方案1】：通过在AndroidManifest.xml中添加<uses-permission android:name="android.permission.INTERNET"/>解决
【讨论】：
以上是关于HTML / JS 下拉菜单按钮不会放在 Android Studio WebView 中的主要内容，如果未能解决你的问题，请参考以下文章