我开发了一个html文件,它主要由javascript代码组成。
该index.html在webview上运行并执行操作,但当导入到android文件时,只有UI显示,但它没有执行操作。
这是我的代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>BrainVita Game</title>
<style type="text/css">
.marble { width: 30px; height: 30px; border: 0px;position:inherit; top:0px; left:0px}
.marbleHover { width: 30px;height:30px; border:2px; border-color:red}
.divclass {border: 1px solid blue; width: 30px;height:30px; text-align:center;}
.board-state-Hover {border: 2px solid red; width: 30px;height:30px;}
.board-state-Active {border: 1px solid green; width: 30px;height:30px;}
</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('jquery', '1.3.2');
google.load('jqueryui', '1.7.2');
</script>
</head>
<body>
<script type='text/javascript'>
$(document).ready(function()
{
$('#reset').click(function ()
{
DrawBoard();
});
DrawBoard();
});
function DrawBoard()
{
$('#Brainvita').empty();
var gameBoard = "<table border='0' cellspacing='3' cellpadding='2'>";
for(var rows = 0; rows < 7; rows++)
{
gameBoard+= "<tr>";
for(var cols = 0; cols < 7; cols++)
{
var imgId = " id = 'i" + rows + cols + "' ";
var divId = " id = 'd" + rows + cols + "' ";
var altValue = " alt = 'i" + rows + cols + "' ";
if(rows < 3 && cols > 1 && cols < 5)
{
gameBoard+= GetImageMarble(divId, imgId, altValue);
}
else if(rows > 1 && rows < 5)
{
if(rows == 3 && cols == 3)
{
gameBoard+= GetEmptyMarble(divId);
}
else
{
gameBoard+= GetImageMarble(divId, imgId, altValue);
}
}
else if(rows > 4 && cols > 1 && cols < 5)
{
gameBoard+= GetImageMarble(divId, imgId, altValue);
}
else
{
gameBoard+= "<td></td>";
}
}
gameBoard+= "</tr>";
}
gameBoard += "</table>";
$('#Brainvita').html(gameBoard);
$("div[id^='d']").addClass('divclass');
$('#Brainvita').removeClass('divclass');
$("img[id^='i']").draggable({ containment: '#Brainvita',
revert: 'invalid',
tolerance: 'fit',
snap: true,
snapMode: 'inner',
snapTolerance: 5});
$("div[id^='d']").droppable({
accept: function(event) {
var returnFlag = false;
if(event[0].nodeName == "IMG")
{
var destId = this.id;
var srcId = event[0].id;
var destNo = parseInt(destId.substring(1,3));
var srcNo = parseInt(srcId.substring(1,3));
var result = Math.abs(destNo - srcNo);
var removeNo = 0;
if($(this).length == 1 && result != 0)
{
switch(result)
{
case 2:
removeNo = ((destNo - srcNo) > 0) ? destNo - 1 : destNo + 1;
break;
case 20:
removeNo = ((destNo - srcNo) > 0) ? destNo - 10 : destNo + 10;
break;
}
if((result == 2 || result == 20) && removeNo != 0)
{
var elementToBeRemoved = (removeNo < 10) ? "0" + removeNo : removeNo;
if($("#i" + elementToBeRemoved).length == 1 &&
$("#i" + ((destNo < 10) ? "0" + destNo : destNo)).length == 0)
{
returnFlag = true;
}
}
}
}
return returnFlag;
},
hoverClass: 'board-state-Active',
drop: function(event, ui) {
var destId = this.id;
var srcId = ui.helper.context.id; //event.srcElement.id;
var destNo = parseInt(destId.substring(1,3), 10);
var srcNo = parseInt(srcId.substring(1,3, 10));
var result = Math.abs(destNo - srcNo);
var removeNo = 0;
if($(this).length == 1 && result != 0)
{
switch(result)
{
case 2:
removeNo = ((destNo - srcNo) > 0) ? destNo - 1 : destNo + 1;
break;
case 20:
removeNo = ((destNo - srcNo) > 0) ? destNo - 10 : destNo + 10;
break;
}
if((result == 2 || result == 20) && removeNo != 0)
{
ui.helper.context.id = "i" + ((destNo < 10) ? "0" + destNo : destNo);
ui.helper.context.alt = ui.helper.context.id;
var elementToBeRemoved = (removeNo < 10) ? "0" + removeNo : removeNo;
if($("#d" + elementToBeRemoved).length == 1)
{
$("#i" + elementToBeRemoved).remove();
$("#d" + elementToBeRemoved).empty();
}
}
}
}
});
}
function GetImageMarble(divId, imgId, altValue)
{
var imgTag = "<td align='center' valign='middle'><div ";
imgTag = imgTag + divId;
imgTag = imgTag + "><img ";
imgTag = imgTag + altValue + imgId;
imgTag = imgTag + " src='";
imgTag = imgTag + "http://2.bp.blogspot.com/_rTqG9Y-vJsM/S02FPRVxU2I/AAAAAAAACsA/Wa7Ne0AgY_w/s320/Red.PNG'";
imgTag = imgTag + " class="marble"></div></td>";
return imgTag;
}
function GetEmptyMarble(divId)
{
return "<td><div " + divId + "></div></td>";
}
</script>
<table border="0" cellpadding="1" cellspacing="1" style="border: solid 1px green">
<tr>
<td align="center">
<button id="reset">
Reset Board</button><br />
<span id="messages"></span>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
<div id="Brainvita">
Hello</div>
</td>
</tr>
</table>
<div id="Trace" style="display: none; width: 400px;">
Trace Messages
</div>
<div id="adivSample" style="display: none; width: 100px">
Where are you?
</div>
<div id="adebug" style="display: none; width: 100px">
Debug Messages Here
</div>
</body>
</html>
怎么能解决呢?
感谢您的帮助。
由于您谈论的是一个操作,我假设您在html文件中使用的是javascript。要使javascript在您的Web视图中工作,您需要调用webview.getSettings().setJavaScriptEnabled(true);