在瀏覽器和PhoneGap上顯示不同的網頁

Hullo，我想通過PhoneGap Desktop應用程序呈現簡單的兩個框架頁面。由表格構成的底部框架正確無誤地顯示出來，相反地，當我連接到它的網絡版本時（無論是在我的電腦還是iPhone上），正確顯示的圖片都應該顯示在頂部，但是當我嘗試訪問它時通過將iPhone上的PhoneGap應用程序或Safari連接到本地出版物，頂部屏幕完全空白。我使用NVD3庫來繪製圖形，並且我使用Ajax加載它們的數據。可能是什麼問題，我該如何調試？這是頁面的代碼;飼養網頁是局部的，所以你可能不能夠正確地執行它：在瀏覽器和PhoneGap上顯示不同的網頁

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
    text { 
     font: 12px sans-serif; 
    } 
    svg { 
     display: block; 
     height: 75%; 
    } 
    html, body, #chart1, svg { 
     margin: 0px; 
     padding: 0px; 
     height: 100%; 
     width: 100%; 
    } 

    .dashed { 
     stroke-dasharray: 5,5; 
    } 
</style> 
<meta charset="utf-8"> 
<link href="../build/nv.d3.css" rel="stylesheet" type="text/css"> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.min.js" charset="utf-8"></script> 
<script src="../build/nv.d3.js"></script> 
<link href="drawer.css" rel="stylesheet" type="text/css"> 
<!-- <script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script> --> 
<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" /> 
<!-- This is a wide open CSP declaration. To lock this down for production, see below. --> 
<!-- <meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *" /> --> 
<!-- Good default declaration: 
* gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication 
* https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly 
* Disables use of eval() and inline scripts in order to mitigate risk of XSS vulnerabilities. To change this: 
    * Enable inline JS: add 'unsafe-inline' to default-src 
    * Enable eval(): add 'unsafe-eval' to default-src 
* Create your own at http://cspisawesome.com 
--> 
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: 'unsafe-inline' https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *" /> 
<link rel="stylesheet" type="text/css" href="css/index.css" /> 
</head> 
<body class='with-3d-shadow with-transitions'"> 
<input type="checkbox" id="drawer-toggle" name="drawer-toggle"/> 
<label for="drawer-toggle" id="drawer-toggle-label"></label> 
<header>Select</header> 
<nav id="drawer"> 
    <div id="list"> 
    </div> 
</nav> 
<div id="page-content"> 
<div id="chart1"></div> 
<script> 
var chart; 
var data; 
var hiddenGraphNames=[]; 

nv.addGraph(function() { 
alert("nv"); 
    loadJSON(function(response) { 
     loadPipeNames(response); 
     chart = nv.models.lineChart() 
      .options({ 
       duration: 300, 
       useInteractiveGuideline: true 
      }) 
     ; 

    // chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately 
     chart.xAxis 
      .axisLabel("Time (s)") 
      .tickFormat(d3.format(',.1f')) 
      .staggerLabels(true) 
     ; 

     chart.yAxis 
      .axisLabel('Voltage (v)') 
      .tickFormat(function(d) { 
       if (d == null) { 
        return 'N/A'; 
       } 
       return d3.format(',.2f')(d); 
      }) 
     ; 
     data = pipeGraphs(response); 
     d3.select('#chart1').append('svg') 
      .datum(data) 
      .call(chart); 

     nv.utils.windowResize(chart.update); 

     return chart; 
    }) 
}); 

String.prototype.strcmp = function(s) { 
    if (this < s) return -1; 
    if (this > s) return 1; 
    return 0; 
} 

function load(){ 
    var parent=window.parent.document; 
    var div=parent.getElementById('excludedPipes'); 
    var value=div.getAttribute('value'); 
    if (value.length>0){ 
     //alert("dentro"); 
     hiddenGraphNames = value.split(","); 
    } else { 
     //alert("resetto"); 
     hiddenGraphNames = []; 
    } 
} 

function loadJSON(callback) { 
    var xhr = new XMLHttpRequest(); 
    xhr.overrideMimeType("application/json"); 
    xhr.open('GET', 'http://materiali.c-s-m.it/phonegap/', true); // Replace 'my_data' with the path to your file 
    xhr.onload = function (e) { 
     if (xhr.readyState === 4) { 
      if (xhr.status === 200) { 
     // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode 
       callback(xhr.responseText); 
      } else { 
       alert(xhr.statusText); 
      } 
     } 
    }; 
    xhr.send(null); 
} 

function save(){ 
    var parent=window.parent.document; 
    var div=parent.getElementById('excludedPipes'); 
    div.setAttribute('value', hiddenGraphNames); 
} 



function pipeGraphs(response){ 
    load(); 
    var collection=[]; 
    var actual_JSON = JSON.parse(response); 
    for (i in actual_JSON){ 
     var values=[]; 
     var element=actual_JSON[i]; 
     var graph=element.graph; 
     var color=graph.color; 
     var key=graph.name; 
     var present=hiddenGraphNames.filter(function(e) { return e == key }) 
     if (present.length>0){ 
      setHiddenColor(true, key); 
      continue; 
     } 
     var j=0; 
     graph.values.forEach(function(value){ 
      values.push({x: j, y: value}); 
      j++; 
     }); 
     collection.push({ 
      area: false, 
      values: values, 
      key: key, 
      color: color, 
      strokeWidth: 4 
     }); 
    } 
    //logValues(collection[0].values) 
    return collection; 
} 

function sinAndCos() { 
    var sin = [], 
     sin2 = [], 
     cos = [], 
     rand = [], 
     rand2 = [] 
     ; 

    for (var i = 0; i < 100; i++) { 
     sin.push({x: i, y: i % 10 == 5 ? null : Math.sin(i/10) }); //the nulls are to show how defined works 
     sin2.push({x: i, y: Math.sin(i/5) * 0.4 - 0.25}); 
     cos.push({x: i, y: .5 * Math.cos(i/10)}); 
     rand.push({x:i, y: Math.random()/10}); 
     rand2.push({x: i, y: Math.cos(i/10) + Math.random()/10 }) 
    } 

    return [ 
     { 
      area: true, 
      values: sin, 
      key: "Sine Wave", 
      color: "#ff7f0e", 
      strokeWidth: 4, 
      classed: 'dashed' 
     }, 
     { 
      values: cos, 
      key: "Cosine Wave", 
      color: "#2ca02c" 
     }, 
     { 
      values: rand, 
      key: "Random Points", 
      color: "#2222ff" 
     }, 
     { 
      values: rand2, 
      key: "Random Cosine", 
      color: "#667711", 
      strokeWidth: 3.5 
     }, 
     { 
      area: true, 
      values: sin2, 
      key: "Fill opacity", 
      color: "#EF9CFB", 
      fillOpacity: .1 
     } 
    ]; 
} 
function composeAttributes(strings){ 
    var output="?"; 
    for (var i in strings){ 
     var string=strings[i]; 
     output+="=1&"; 
    } 
    return output; 
} 

function setHiddenColor(hidden, name){ 
    var aHref=document.getElementById(name); 
    if (hidden){ 
     aHref.setAttribute("style", "color:FF0000"); //disable 
     //alert("rosso"+aHref); 
    } else { 
     aHref.setAttribute("style", "color:#FFFFFF"); //enable 
    } 
} 

function toggle(name){ 
    var present=hiddenGraphNames.filter(function(e) { return e == name }) 
    if (present.length==0){ //was enabled 
     hiddenGraphNames.push(name); 
    } else { 
     hiddenGraphNames = hiddenGraphNames.filter(function(e) { return e !== name }) 
    } 
    save(); 
    location.reload(); 
} 

function loadPipeNames(response){ 
    var menu="<ul>"; 
    var actual_JSON = JSON.parse(response); 
    for (var i in actual_JSON){ 
     var values=[]; 
     var element=actual_JSON[i]; 
     var graph=element.graph; 
     var name=graph.name; 
     var present=hiddenGraphNames.filter(function(e) { return e == key }) 
     if (present.length>0){ 
      continue; 
     } 
     menu+="<li><a id='"+name+"' href=\"#\" onclick=\"toggle('"+name+"');\">"+name+"</a></li>"; 
    } 
    menu+="</ul>"; 
    var div=document.getElementById("list"); 
    div.innerHTML=menu; 
} 

function myMenu(){ 
    loadJSON(function(response) { 
     loadPipeNames(response) 
    }); 
}

我在Chrome控制檯上看到一個錯誤是： index.js：41遺漏的類型錯誤：無法讀取屬性'querySelector'null（...）

來源

2016-11-24 Fabrizio Bartolomucci

您是否試過鍍鉻設備模擬器？您可以在開發控制檯處於活動狀態時使用左上角的「切換設備工具欄」在Chrome工具中將其切換。使用Safari瀏覽器，您還可以檢查實際iOS設備上的頁面。 – Jacksonkr

不幸的是我有意大利的Chome版本，我沒有Chrome工具的地方。然而，問題在於，當我通過Web服務器上的瀏覽器訪問頁面時，頁面加載正常，但如果通過iOS應用訪問它或者通過連接到發佈的頁面，PhoneGap框架對它進行滲透時會出現問題。此後，我懷疑PhoneGap不能正確顯示內容，而不是瀏覽器問題。 –

哈哈，[試試這個]（https://developers.google.com/web/tools/chrome-devtools/device-mode/） – Jacksonkr

問題是由於我的iPhone上有一個問題，它將DNS配置到外部服務器，而要連接的服務器是內部的。

來源

2017-01-03 11:46:01

在瀏覽器和PhoneGap上顯示不同的網頁

回答

相關問題