使用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”
相关标签