我的应用程序在任何服务器上工作正常，甚至在webstorm中并显示仪表，但当我在cordova中运行它时，它在script.js文件中给出了以下错误“未捕获的TypeError：无法执行'getComputedStyle'on' Window'：参数1不是'Element'类型。 在script.js：14“，errorbrowser ERROR SCRIPT 下面给出了这些文件的创建和修改。 的index.html
<!DOCTYPE html>
<html>
<head>
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/script.js"></script>
<meta charset="UTF-8">
<title>Geo Location</title>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
#floating-panel {
position: absolute;
top: 10px;
right: 100px;
z-index: 5;
background-color: #555;
padding: 0.5em 0.5em;
border: 5px solid rgb(200,200,200);
}
#floating-panel select{
padding: 0;
margin: 0;
}
</style>
<script type="text/javascript" src="cordova.js"></script>
<script src="https://maps.google.com/maps/api/js" type="text/javascript"></script>
<script type="text/javascript">
google.maps.event.addDomListener(window, 'load', onSuccess);
navigator.geolocation.getCurrentPosition(onSuccess, onError, { timeout: 30000 });
function onSuccess(position) {
var lat=position.coords.latitude;
var lng=position.coords.longitude;
//Google Maps
var myLatlng = new google.maps.LatLng(lat,lng);
var mapOptions = {zoom: 4,center: myLatlng};
console.log(document.getElementById('map-canvas'));
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({draggable:true,
animation:google.maps.Animation.DROP,
position: myLatlng,map: map});
}
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
function changeLocation () {
// Get the address information from the ‘value’ of the selected item
var latlng = document.getElementById("address").value;
var lat = parseFloat(latlng.substring(0,7));
var lng = parseFloat(latlng.substring(8,15)) * (-1);
console.log(lat);
console.log(lng);
// Google Maps
var myLatlng = new google.maps.LatLng(lat,lng);
var mapOptions = {zoom: 4, center: myLatlng};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,map: map});
}
var url = "http://api.openweathermap.org/data/2.5/weather?q=rochester,%20ny&appid=a7018b4326269d29fbf2e11c8dc9696a";
/* Create an XMLHttpRequest object to reqest data from a web server */
/* (the name of the request class has the legacy 'XML...' ) */
/* because it first read only XML data */
var httpObj = new XMLHttpRequest();
/* This function is called every time the status of the request object changes */
/* When the readystate is 4, and the status is 200, the response is ready */
/* (in other words, information is back from the server) */
httpObj.onreadystatechange = function() {
if (httpObj.readyState == 4 && httpObj.status == 200) {
/* read the response into the variable 'myArr' */
var myArr = JSON.parse(httpObj.responseText);
/* process the data you received from the response */
myFunction(myArr.weather);
}
};
/* the open method specifies the type of http request */
/* --- we want to use GET (not POST), */
/* --- we send the name of the file to get */
/* --- we use 'true' for an asynchronous request */
httpObj.open("GET", url, true);
/* the send method with no parameters is used for GET */
httpObj.send();
/*-----------------------------------------------------*/
/* function that processes the data received from the response */
function myFunction(arr) {
/* create a variable to hold an html string */
var out = "";
var i;
for(i = 0; i < arr.length; i++) {
/* construct each line of html from the data in your JSON file */
out +=
"<div class='responsive'<div class='gallery'> " +
// "<img class='pic' height='200' width='300' src=images/" + arr[i].pic + ".png />" +//
"<div class='desc' >" + arr[i].description + "</div>" +
"</div></div>"
;
}
/* send the html out to the div with the ID 'listofitems' */
document.getElementById("listofitems").innerHTML = out;
}
</script>
</head>
<body>
<div class="container A">
<svg class="typeRange" height="165" width="330" view-box="0 0 330 165">
<g class="scale" stroke="red"></g>
<path class="outline" d="" />
<path class="fill" d="" />
<polygon class="needle" points="220,10 300,210 220,250 140,210" />
</svg>
<div class="output">18</div>
</div>
<p>You may change the initial value by dragging over the gauge
<br>or by editing the input below:</p>
<input type="text" class="initialValue" value="18" />
<div class="cardlist">
<div class="content">
<div id="listofitems">
<!-- The Script below gets the data into this div -->
</div>
</div>
</div>
<div id="map-canvas"></div>
<div id="floating-panel">
<!-- Create a select tag with the id='address', -->
<!-- then create several options of locations of your choice -->
<select id="address" onchange="changeLocation();">
<option value="43.1610:77.6109">Rochester NY</option>
<option value="40.7128:74.0060">New York NY</option>
<option value="41.8781:87.6298">Chicago IL</option>
<option value="Miami FL">Miami FL</option>
<option value="Los Angeles CA">Los Angeles CA</option>
<option value="Atlanta GA">Atlanta GA</option>
</select>
</div>
</body>
</html>
的script.js
var containersRy = document.querySelector(".container");
var svg = document.querySelector(".typeRange");
var output = document.querySelector(".output");
var outline = document.querySelector(".outline");
var fill = document.querySelector(".fill");
var center = document.querySelector(".center");
var needle = document.querySelector(".needle");
var initialValue = document.querySelector(".initialValue");
var rad = Math.PI / 180;
var NS = "http://www.w3.org/2000/svg";
var s= window.getComputedStyle(svg, null)
var W = parseInt(s.getPropertyValue("width"));
var offset = 40;
var cx = ~~(W / 2);
var cy = 160;
var r1 = cx - offset;
var delta = ~~(r1 / 4);
var initVal = initialValue.value;
var isDragging = false;
var x1 = cx + r1,
y1 = cy;
var r2 = r1 - delta;
var x2 = offset,
y2 = cy;
var x3 = x1 - delta,
y3 = cy;
function drawScale() {
sr1 = r1 + 5;
sr2 = r2 - 5;
srT = r1 + 20;
var scale = document.querySelector(".scale");
clearRect(scale);
var n = 0;
for (var sa = -180; sa <= 0; sa += 18) {
var sx1 = cx + sr1 * Math.cos(sa * rad);
var sy1 = cy + sr1 * Math.sin(sa * rad);
var sx2 = cx + sr2 * Math.cos(sa * rad);
var sy2 = cy + sr2 * Math.sin(sa * rad);
var sxT = cx + srT * Math.cos(sa * rad);
var syT = cy + srT * Math.sin(sa * rad);
var scaleLine = document.createElementNS(NS, "line");
var scaleLineObj = {
class: "scale",
x1: sx1,
y1: sy1,
x2: sx2,
y2: sy2
};
setSVGAttributes(scaleLine, scaleLineObj);
scale.appendChild(scaleLine);
var scaleText = document.createElementNS(NS, "text");
var scaleTextObj = {
class: "scale",
x: sxT,
y: syT,
};
setSVGAttributes(scaleText, scaleTextObj);
scaleText.textContent = n * 10;
scale.appendChild(scaleText);
n++
}
}
function drawInput(cx, cy, r1, offset, delta, a) {
var d1 = getD1(cx, cy, r1, offset, delta);
var d2 = getD2(cx, cy, r1, offset, delta, a);
drawScale();
outline.setAttributeNS(null, "d", d1);
fill.setAttributeNS(null, "d", d2);
drawNeedle(cx, cy, r1, a);
}
function updateInput(p, cx, cy, r1, offset, delta) {
var x = p.x;
var y = p.y;
var lx = cx - x;
var ly = cy - y;
var a = Math.atan2(ly, lx) / rad - 180;
drawInput(cx, cy, r1, offset, delta, a);
output.innerHTML = Math.round((a + 180) / 1.8);
initialValue.value = Math.round((a + 180) / 1.8);
}
function getD1(cx, cy, r1, offset, delta) {
var x1 = cx + r1,
y1 = cy;
var x2 = offset,
y2 = cy;
var r2 = r1 - delta;
var x3 = x1 - delta,
y3 = cy;
var d1 =
"M " + x1 + ", " + y1 + " A" + r1 + "," + r1 + " 0 0 0 " + x2 + "," + y2 + " H" + (offset + delta) + " A" + r2 + "," + r2 + " 0 0 1 " + x3 + "," + y3 + " z";
return d1;
}
function getD2(cx, cy, r1, offset, delta, a) {
a *= rad;
var r2 = r1 - delta;
var x4 = cx + r1 * Math.cos(a);
var y4 = cy + r1 * Math.sin(a);
var x5 = cx + r2 * Math.cos(a);
var y5 = cy + r2 * Math.sin(a);
var d2 =
"M " + x4 + ", " + y4 + " A" + r1 + "," + r1 + " 0 0 0 " + x2 + "," + y2 + " H" + (offset + delta) + " A" + r2 + "," + r2 + " 0 0 1 " + x5 + "," + y5 + " z";
return d2;
}
function drawNeedle(cx, cy, r1, a) {
var nx1 = cx + 5 * Math.cos((a - 90) * rad);
var ny1 = cy + 5 * Math.sin((a - 90) * rad);
var nx2 = cx + (r1 + 15) * Math.cos(a * rad);
var ny2 = cy + (r1 + 15) * Math.sin(a * rad);
var nx3 = cx + 5 * Math.cos((a + 90) * rad);
var ny3 = cy + 5 * Math.sin((a + 90) * rad);
var points = nx1 + "," + ny1 + " " + nx2 + "," + ny2 + " " + nx3 + "," + ny3;
needle.setAttributeNS(null, "points", points);
}
// helpers
function oMousePos(elmt, evt) {
var ClientRect = elmt.getBoundingClientRect();
return { //obj
x: Math.round(evt.clientX - ClientRect.left),
y: Math.min(Math.round(evt.clientY - ClientRect.top), cy)
}
}
function clearRect(node) {
while (node.firstChild) {
node.removeChild(node.firstChild);
}
}
function setSVGAttributes(elmt, oAtt) {
for (var prop in oAtt) {
elmt.setAttributeNS(null, prop, oAtt[prop]);
}
}
// events
window.addEventListener("load", function() {
var pa = (initVal * 1.8) - 180;
var p = {};
p.x = cx + r1 * Math.cos(pa * rad);
p.y = cy + r1 * Math.sin(pa * rad);
updateInput(p, cx, cy, r1, offset, delta)
}, false);
initialValue.addEventListener("input", function() {
var val = this.value;
var newVal = (!isNaN(val) && val >= 0 && val <= 100) ? val : 18;
var pa = (newVal * 1.8) - 180;
var p = {};
p.x = cx + r1 * Math.cos(pa * rad);
p.y = cy + r1 * Math.sin(pa * rad);
updateInput(p, cx, cy, r1, offset, delta)
}, false);
svg.addEventListener("mousedown", function(evt) {
isDragging = true;
this.classList.add("focusable");
var mousePos = oMousePos(svg, evt);
updateInput(mousePos, cx, cy, r1, offset, delta);
}, false);
svg.addEventListener("mouseup", function(evt) {
isDragging = false;
this.classList.remove("focusable");
}, false);
svg.addEventListener("mouseout", function(evt) {
isDragging = false;
this.classList.remove("focusable");
}, false);
svg.addEventListener("mousemove", function(evt) {
if (isDragging) {
var mousePos = oMousePos(svg, evt);
updateInput(mousePos, cx, cy, r1, offset, delta);
}
}, false);
的style.css
* {
margin: 0;
padding: 0;
}
body,
html {
width: 100%;
height: 100%;
margin: 0px auto;
background-color: #0a1a17;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
color: #ccc;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
}
.container {
position: relative;
margin: 100px auto 50px auto;
height: 165px;
width: 330px;
}
.output {
line-height: 35px;
width: 60px;
height: 30px;
background-color: #0f4534;
border-radius: 60px 60px 0 0;
position: absolute;
top: 135px;
left: 135px;
text-align: center;
}
.initialValue {
border: none;
border-bottom: 1px solid #399988;
color: #399988;
display: block;
width: 3em;
background-color: transparent;
margin: 1em auto;
outline: none;
font-size: 16px;
text-align: center;
}
/*SVG*/
svg {
margin: 0px;
padding: 0;
cursor: pointer;
border: 1px solid #0a1a17;
}
svg.focusable {
border: 1px solid #0f4534;
}
.outline,
.fill,
.center,
.needle,
.scale,
.output {
pointer-events: none;
}
.outline {
fill: #0f4534;
}
.fill {
fill: #399988;
}
.needle {
fill: #aa0000;
}
.scale {
stroke: #aaa;
}
text {
text-anchor: middle;
dominant-baseline: alphabetic;
font: 12px verdana, sans-serif;
fill: #aaa;
}
除了这些之外，我没有对在cordova中默认生成的Index.js和Index.css文件进行任何更改。