使用Google Apps腳本的JQuery Mobile
[英]JQuery Mobile with Google Apps Script
問題描述
我使用HTMLService將Google Apps腳本部署為獨立的Web應用程序，該應用程序提供了一個簡單的前端，可將預算數據輸入到Google電子表格中。 我正在使用JQuery Mobile來獲取一些javascript，並將其設置為一種適合移動設備的方式，因為我的應用程序的主要用例是從我的手機中輸入購買。
我的問題是，在移動瀏覽器上，該應用程序無法正常擴展。 這是瀏覽器的寬度，但就好像它已經“縮小”了。 所有控件在移動設備上基本上都無法使用。
如果腳本嵌入在Google網站中，它可以正常擴展，但我寧願能夠直接查看該網絡應用，而不是將其嵌入Google協作平台。
編輯：我的代表現在足夠高，可以發布照片，所以在這里（代碼下面）。
編輯：我的HTML的開頭在下面。 我最初在這里有javascript和完整的HTML，如果需要的話我可以添加片段，但是我再次對它進行了審核，並且認為它不會解決問題，因為我把它刪除了。
HTML：
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<?!= include('javascript'); ?>
<div data-role="page" data-theme="a" id="main">
<div data-role="content">
<form id="myForm">
...
Code.gs：
function doGet() {
return HtmlService.createTemplateFromFile('index').evaluate()
.setSandboxMode(HtmlService.SandboxMode.IFRAME).setTitle('Budget Entry');
}
帶完整代碼的代碼段：
//<script> function formSuccess() { var dateSelect = document.getElementById("date"); var dateSelected = dateSelect.options[dateSelect.selectedIndex].text; var catSelect = document.getElementById("category"); var catSelected = catSelect.options[catSelect.selectedIndex].text; var amountEntered = document.getElementById("amount").value; var noteEntered = document.getElementById("note").value; var successMsg = 'Date: ' + dateSelected + '<br>Category: ' + catSelected + '<br>Amount: $' + amountEntered + '<br>Note: ' + noteEntered; $('#dialogMain').html(successMsg); $.mobile.silentScroll(0); $.mobile.changePage( "#dialog", { role: "dialog" } ); requestCategoryInfo(document.getElementById("status")); document.getElementById("amount").value = ''; document.getElementById("note").value = ''; } function submitForm() { if (document.getElementById('amount').value.length == 0) { alert('Please enter an amount.'); return; } $.mobile.loading( 'show' ); $('#status').html(''); google.script.run .withSuccessHandler(formSuccess) .processForm(document.getElementById('myForm')); } function loadUI() { $.mobile.loading( 'show' ); loadDateSelect(); google.script.run.withSuccessHandler(loadCategoryNamesAndValues).withFailureHandler(sendLog) .getCategoryNamesAndValues(); $.mobile.loading( 'hide' ); } function loadDateSelect(){ var d = new Date(); var month = d.getMonth()+1; var today = d.getDate(); var daysInAMonth = [0,31,28,31,30,31,30,31,31,30,31,30,31]; for (var n=1; n <= daysInAMonth[month]; n++) { var option = $("<option>").attr('value',n).text(month+"/"+n); $('#date').append(option); } $('#date').val(today); $('#date').selectmenu('refresh', true); } function loadCategoryNamesAndValues(catNamesAndValues){ var namesAndValues = catNamesAndValues; var optionHTML = ''; var currentGroup = ''; var catName = ''; var catID = ''; for (var i=0; i<namesAndValues.length; i++) { catName = namesAndValues[i][0]; catID = namesAndValues[i][1]; if (catID.toString() == "Group"){ // Handle Group Name if (currentGroup.length > 0) { // close previous optgroup tag optionHTML += "</optGroup>"; } // Open optGroup currentGroup = catName; optionHTML += "<optGroup label='" + currentGroup + "'>"; } else if (isNaN(parseInt(catID)) || parseInt(catID) == 0){ //Do Nothing } else { // Create Option HTML as: <option value=namesAndValues[i][1]>namesAndValues[i][0]</option> optionHTML += "<option value='" + catID + "'>" + catName + "</option>"; } } // Close current OptGroup optionHTML += "</optGroup>" document.getElementById('category').innerHTML = optionHTML; $('#category').selectmenu('refresh', true); } function categoryChanged() { setStatus(''); requestCategoryInfo(document.getElementById('status')); } function requestCategoryInfo(container) { $.mobile.loading( 'show' ); google.script.run .withSuccessHandler(displayCategoryInfo) .withFailureHandler(sendLog) .withUserObject(container) .getCategoryInfo(document.getElementById('category').value); } function displayCategoryInfo(categoryInfo, container){ var spentStr = 'Spent $' + categoryInfo.actual.toFixed(2) + ' of $' + categoryInfo.budgeted.toFixed(2); var remainingStr = 'Remaining: $' + categoryInfo.remaining.toFixed(2); var statusDiv = container; if (statusDiv.innerHTML.length > 0){ statusDiv.innerHTML += '<br>'}; statusDiv.innerHTML += spentStr + '<br>' + remainingStr; if (String(categoryInfo.fundAmount).length > 0) { var fundAmountStr = ''; if (categoryInfo.remaining < 0) { fundAmountStr = (categoryInfo.fundAmount + categoryInfo.remaining).toFixed(2); } else { fundAmountStr = categoryInfo.fundAmount.toFixed(2); } statusDiv.innerHTML += '<br>Fund: $' + fundAmountStr; } $.mobile.loading( 'hide' ); } function setStatus(html){ document.getElementById('status').innerHTML = html; } function appendStatus(html){ setStatus(document.getElementById('status').innerHTML + '<br>' + html); } function sendLog(){ google.script.run.sendLog(); } //</script>
<!DOCTYPE html> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css"> <?!= include('javascript'); ?> <div data-role="page" data-theme="a" id="main"> <div data-role="content"> <form id="myForm"> <div>Date</div> <div><select name="date" id="date"></select></div> <div>Category</div> <div><select name=category id="category" onchange="categoryChanged()" required></select></div> <div>Amount</div> <div><input type="text" name="amount" id="amount" required></div> <div>Note</div> <div><input type="text" name="note" id="note"></div> <div><input type="button" id="submit" value="Submit" onclick="submitForm()"/></div> </form> <!--<a href="#dialog" data-role="button" data-rel="dialog" data-transition="pop">Dialog</a>--> </div><!-- /content --> <div data-role="footer"> <div id="status"></div> </div><!-- /footer --> </div><!-- /page --> <div data-role="page" id="dialog" data-close-btn="none"> <div data-role="header"> <h1 id="dialogHeading">Success!</h1> </div> <div data-role="main" class="ui-content" id="dialogMain"> <p>Text goes here.</p> </div> <div class="ui-grid-b"> <div class="ui-block-a"></div> <div class="ui-block-b"><a href="#main" data-role="button" data-icon="check">OK</a></div> <div class="ui-block-c"></div> </div><!-- /grid-a --> <!--><div data-role="footer"></div>--> </div> <script type="text/javascript"> $(loadUI); </script>
4 個解決方案
解決方案1
2 已采納 2017-02-04 10:53:10
var output = HtmlService.createHtmlOutput('<b>Hello, world!</b>');
output.addMetaTag('viewport', 'width=device-width, initial-scale=1');
這會有所幫助
解決方案2
1 2015-06-04 13:49:48
您可以通過CSS Media Queries確定顯示的大小。 例如，將其添加到CSS會導致表單以不同的方式顯示，具體取決於設備的屏幕大小：
@media only screen and (min-device-width: 413px) and (max-device-width: 415px) { /* iPhone 6+ */
#main, #dialog {
zoom: 3;
background: red;
}
}
@media only screen and (min-device-width: 374px) and (max-device-width: 376px) { /* iPhone6 Styles */
#main, #dialog {
transform: scale(2);
background: blue;
}
}
@media only screen and (min-device-width: 359px) and (max-device-width: 361px) { /* iPhone6+ Alt Styles */
#main, #dialog {
transform: scale(2);
background: green;
}
}
@media only screen and (min-device-width: 319px) and (max-device-width: 321px) { /* iPhone5 or less Styles */
#main, #dialog {
transform: scale(2);
background: grey;
}
}
使用Chrome的設備模擬，表單看起來非常好。 （紅色背景由上面的CSS設置。）但是當我從真正的iPhone 6+訪問應用程序時，並非所有元素都放大了。 （例如，提交按鈕。）因此，可能需要一些其他特定的CSS來進一步定制結果。
解決方案3
1 2017-03-08 20:40:34
我有這個確切的問題。 我所要做的就是為網站測試一些jQuery移動模板，而不是將它們部署到Google App Engine或Google Cloud Storage 。
Google雲端硬盤不再允許您直接投放HTML ，因此應用腳本是下一個最佳選擇。
問題是應用程序腳本iframe的所有內容，為想要在移動設備上查看的內容創建視口問題（即使在解決了jQuery src=需要https而不是http ）。
解決方法是在iframe頁面上添加META標記以及您正在提供的HTML 。
無論如何，添加META標簽的兩個答案效果很好。
如果你正在提供jQuery移動頁面，這個code.gs代碼對我code.gs ：
function doGet() {
var output = HtmlService.createHtmlOutputFromFile('test');
output.addMetaTag('viewport', 'width=device-width, initial-scale=1');
return output;
}
test是你的test.html文件。
解決方案4
0 2016-01-23 15:57:06
這應該有助於Class HtmlOutput的addmetatagname（） 。 您應該通過代碼修改元標記。
Google Apps腳本上的jQuery datepicker和selectmenu
[英]JQuery datepicker and selectmenu on Google Apps Script
*服務器端* Google Apps容器綁定腳本中的jQuery庫
[英]jQuery library in *server side* Google Apps Container Bound Script
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
Google Apps腳本，UrlFetchApp和JQuery
Google Apps 腳本 JQuery 表單
在Google Apps腳本中使用jQuery
jQuery在Google Apps腳本中無法正常運行
Google Apps腳本上的jQuery datepicker和selectmenu
Google Apps 腳本 - 移動視圖 - 屏幕縮小太多
Google Apps腳本Web應用程序AJAX，jQuery，JSON？
*服務器端* Google Apps容器綁定腳本中的jQuery庫
谷歌應用程序腳本不循環
Google Apps腳本中的“ .Replace”
相關標簽