欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

问卷调查Html5开发总结

程序员文章站 2022-05-05 18:25:05
...

【Html5能够离线操作、能否开发Html5离线网络应用程序】

按常理Html5开发出来的是Web网页应用，则需网络连接才能下载并使用，作为Html5对离线应用开发的支持最大的特殊，支持离线需要满足如下条件：

  1. 离线资源缓存：需要一种方式来指明应用程序离线工作时所需的资源文件。这样，浏览器才能在在线状态时，把这些文件缓存到本地。此后，当用户离线访问应用程序时，这些资源文件会自动加载，从而让用户正常使用。HTML5 
    中，通过 cache manifest 文件指明需要缓存的资源，并支持自动和手动两种缓存更新方式。
  2. 在线状态检测：开发者需要知道浏览器是否在线，这样才能够针对在线或离线的状态，做出对应的处理。在 HTML5 
    中，提供了两种检测当前网络是否在线的方式。
  3. 本地数据存储：离线时，需要能够把数据存储到本地，以便在线时同步到服务器上。为了满足不同的存储需求，HTML5 提供了 DOM Storage 和 Web
    SQL Database 两种存储机制。前者提供了易用的 key/value 对存储方式，而后者提供了基本的关系数据库存储功能。

问：我的网络应用程序包含了很多页面。我是否需要在每个页面都使用manifest属性，或者我可以只在主页中使用?

答：你网络服务器中的每个页面都需要一个指向缓存名单的为全部应用程序准备的manifest属性。

你的每一个HTML页面指向你的缓存名单文件，并且你的缓存名单文件由合适的Content-Type头支持。但名单文件里有些啥?这是有趣的事情。

问：我需要在我的缓存名单中列出我的HTML页面么?

答：是或者不是。如果你所有的网络应用程序被包含在一个单页面，只需要确认页面通过使用manifest属性指向了缓存名单。当你访问一个含有manifest属性的HTML页面，页面本身被假设为网络应用程序的一部分，所以你不需要将它本身列入名单文件。尽管如此，如果你的网络应用程序包含多个页面，你应该在名单文件中列出所有的HTML页面，否则浏览器将不会知道有其他的HTML页面需要下载并缓存。

【Html5在移动端的屏幕适应性问题】

Html5可以说天生为了移动客户端而存在的，所以开发手机浏览器访问的应用需要自适应手机屏幕

在网页的<head>中增加下面这句话，可以让网页的宽度自动适应手机屏幕的宽度。

[html] view plain copy
  1. <span style="font-size:14px;"><meta name=“viewport” content=“width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes”/></span>  

其中：

width=device-width ：表示宽度是设备屏幕的宽度

initial-scale=1.0：表示初始的缩放比例

minimum-scale=0.5：表示最小的缩放比例

maximum-scale=2.0：表示最大的缩放比例

user-scalable=yes：表示用户是否可以调整缩放比例


【如何保护Html5应用代码】

Html5应用采用的仍然是Javascript（JS）、HTML、CSS 等Web语言，那HTML5如何保护知识产权？

那如何解决，首先可以从以下方面解决：

1）采用Html5+Native混合编程（参照文章：http://www.williamlong.info/archives/3004.html）

Native+Html5实际上是一种加壳的方式，将HTML5用和浏览器封装起来，但这对用户是不可见的，用户没有任何异物感，和Store上下载的App没有什么两样。

我们可以把Web的升级部分部署到服务器上，用户运行App后，App会向服务器讲求获取最新的Web程序并下载运行，这样可以达到跳过各种Store的更新审核，达到快速更新的目的。而且假如用户无法访问互联网，我们可以让用户使用上一个版本的程序，不会像纯Web App那样要求用户一定要联网

代码很安全，众所周知Web应用有一个很大的问题就是代码安全的问题，但现在我们可以将Web代码全部加密，本地应用解密后再运行，大大的提供了代码的安全性。

2）核心业务数据和逻辑放在后台服务器处理

3）使用JS代码混淆器，最好是离线代码混淆器，比如：

Jasob 

网址：http://www.jasob.com/，

Javascript Obfuscator
网址：http://www.javascript-source.com/javascript-obfuscator.html

支持JS混淆和代码压缩，简单好用。

【不同设备打开同一域名然后显示不同】

不同设备如PC、iPhone、iPad、Android设备上打开同一域名然后显示不同，如果是移动设备自动转为HTML5触屏模式，网页根据不同设备，展现不同的方式

比如这个网站：https://jinshuju.net

ASP.NET怎样判断是手机访问网站还是电脑访问

JS判断客户端是手机还是PC

function IsPC() {
    var userAgentInfo = navigator.userAgent;
    var Agents = ["Android", "iPhone",
                "SymbianOS", "Windows Phone",
                "iPad", "iPod"];
    var flag = true;
    for (var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
            flag = false;
            break;
        }
    }
    return flag;
}

【使用VS2012开发jQuery Mobile项目】

使用 jQuery Mobile 及 ASP.NET 開發跨行動裝置網站 (Mobile Web)

jquerymobile 优秀网站及资源汇总贴


【Asp.net与Html5混合编程】

能否实现Asp.net中实现界面（*.aspx）自适应手机及移动设备，但后台逻辑还是写在（*.aspx.cs）中，可以把这种当做为Asp.net和Html5的混合编程，如果界面要求不高的话可以实现。首先*.aspx网页中需要有<!DOCTYPE html> Html5的标识和元素。

如下为相关例子：

jQueryMobile Registration / Signup Dialog


【Asp.net为什么刷新页面会触发最近执行过的一个按钮事件？】

用过ASP.NET的都知道,按钮操作之后会得到一个新的页面,然后用户通过浏览器的回退按钮可以回到原来的页面时,或者点刷新按钮刷新当前页面时,会显示对话框"不重新发送信息,则无法刷新页面",然后就有个"重试","取消"按钮,通常用户为了刷新页面而点击"重试",这样一点问题就来了,那么页面就会重复发送信息,并且执行先前按钮的操作,比如按钮是添加一行数据,那么刷新之后就会添加重复的数据.好的程序或许会报个提示说什么不能重复添加,甚至出个异常,没有限制的程序可能就任由用户重复的添加数据.这样当然是开发人员不想发生的,除非有极端的用户需求.

解决方法如下：

新建一个用户控件

后台代码如下 

[csharp] view plain copy
  1. <div style="text-align: left;">using System;  
  2. using System.Collections;  
  3. using System.Configuration;  
  4. using System.Data;  
  5. using System.Linq;  
  6. using System.Web;  
  7. using System.Web.Security;  
  8. using System.Web.UI;  
  9. using System.Web.UI.HtmlControls;  
  10. using System.Web.UI.WebControls;  
  11. using System.Web.UI.WebControls.WebParts;  
  12. using System.Xml.Linq;  
  13.   
  14. public partial class CheckRefreshed : System.Web.UI.UserControl  
  15. {  
  16.     protected void Page_Load(object sender, EventArgs e)  
  17.     {  
  18.     }  
  19.   
  20.     private bool? _flag;  
  21.   
  22.     public bool IsRefreshed  
  23.     {  
  24.         get  
  25.         {  
  26.             if (_flag.HasValue)  
  27.                 return _flag.Value;  
  28.             else  
  29.             {  
  30.                 _flag = this.Cache[Num] != null;  
  31.                 return _flag.Value;  
  32.             };  
  33.         }  
  34.     }  
  35.   
  36.     private string _num;  
  37.     private string Num  
  38.     {  
  39.         get  
  40.         {  
  41.             if (ViewState["num"] == null)  
  42.                 return Guid.NewGuid().ToString();  
  43.             else  
  44.                 return (string)ViewState["num"];  
  45.         }  
  46.         set  
  47.         {  
  48.             ViewState["num"] = value;  
  49.         }  
  50.     }  
  51.     protected void Page_PreRender(object sender, EventArgs e)  
  52.     {  
  53.         this.Page.Unload += new EventHandler(Page_Unload);  
  54.         _num = Num;  
  55.         Num = Guid.NewGuid().ToString();  
  56.     }  
  57.   
  58.     void Page_Unload(object sender, EventArgs e)  
  59.     {  
  60.         if (_num != null)  
  61.             this.Cache[_num] = 1;  
  62.     }  
  63. }  
  64.   
  65. </div>  


页面部分就一个声明

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="CheckRefreshed.ascx.cs" Inherits="CheckRefreshed" %>

将这个用户控件拖到你要用的页面
按钮事件里第一行加上

//判断是否是重复提交
        if (chkRef.IsRefreshed)
           return;
此控件用来判断你是通过手动刷新页面执行的方法还是自动刷新页面执行的

【jquerymobile Ajax 页面跳转到全新网页问题】

解决从如下方法解决：

1）其实不管页面内链接还是页面间切换，jQueryMobile都是发起Ajax请求加载新的页面。如果想链接到一个新界面，而且URL中不想有以前路径#新页面，可以通过在加入链接属性rel="external"或data-ajax="false"，这就告诉jQuery Mobile需要重新加载一个新的页面，而且URL也是全新的。

2）由于第一种方法在ajax post中没有效果，可以试下传统跳转

window.location = "mMain.html";

参数就通过localStorage传递

localStorage.setParam('usercode', uid);


【JqueryMobile转场注意事项】

使用Jquery Mobile转场容易，但是转场后就有很多事项要注意了，不然你会遇到很多问题。
①AJAX只加载<body>标签里的内容
当用户点击一个jQuery Mobile驱动的网站的链接，那默认会通过Ajax请求页面。（而不是是浏览器通过默认的链接方法家在整个页面）。当请求发出以后，框架会接收到内容，但是他只会将请求的页面的body 内容插入到DOM中（或者只是 data-role="page" 的容器），这就意味着head标签中的元素不会被请求到。
这就意味着在HEAD中引用的脚本和样式在用通过AJAX加载后不会起作用，只能通过普通的HTTP请求执行。当编写jQuery Mobile 网站的脚本时，两种情况都要因为考虑。通过AJAX加载的页面会无视head 中的内容是因为重新执行相同的JS的几率是很高的（因为整站的每个页面可能都引用同样的JS文件）。
所以要想让所有子页面的js能成功被执行，要么就将js写到主页面，要么将js写到子页面的<body>标签内。（这个我更推荐将js放到主页面，因为同事发现在自己的pad上<body>中加入script没效果）
②子页面不支持页面内跳转
我们知道Jquery支持一个html中包含多个<div data-role="page">，只要有id，就可以进行页面切换。

<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo">Go to Page Two</a>
  </div>
</div>

<div data-role="page" id="pagetwo">
  <div data-role="content">
    <a href="#pageone">Go to Page One</a>
  </div>
</div>
但是这里有一个巨坑！我先前就是被这个坑困住了，几乎到彻底放弃：只有主页面支持页面内page跳转，使用Jquery Mobile转场的子页面都不支持页面内page跳转！
简单说明一下：
假设page1.html是入口主页面，它里面有两个page（id为page11、page12）。
page1.html可以跳转到page2.html，page2.html也有俩page(id为page21、page22)。
那么在page1.html页面，page11可以跳转到page12；但是如果转场到page2.html页面，page21无法跳转到page22！
这个有一个解决办法，就是禁用AJAX转场，比如在<a>标签中增加属性data-ajax="false"。
<a href="page2.html" data-ajax="false">页面二</a>
如果这样，page2.html必须引入完整的相关javascript和css文件。
③ 使用 pageInit(),而不是$(document).ready()

转载于：http://www.tuicool.com/articles/BbEfQnn

【Jquerymobile localStorage 怎么保存序列化对象、多行多列表，Datatable】

由于localStorage不支持数组和对象，所以里面只能存储字符串，这样明显就不支持二维数据的存储。所以采用双KEY来进行数据匹配，来模拟实现二维数据。

[html] view plain copy
  1. var strnid = "note_" + RetRndNum(3);  
  2. var notedata = new Object;  
  3. notedata.nid = strnid;  
  4. notedata.type = $hidtype.val();  
  5. notedata.title = $txttitle.val();  
  6. notedata.content = $txtacontent.val();  
  7. var jsonotedata = JSON.stringify(notedata);  
  8. rttophtml5mobi.utils.setParam(strnid, jsonotedata);  

【Html5 用sqllite保存数据】

Web SQL Database Sqllite目前还得不到W3C规范

基于 HTML5 中的 Web SQL Database 来构建应用程序

HTML5 WebStorage

HTML5本地存储——Web SQL Database

HTML5 的Web SQL Databases-本地数据库中文教程


【jquery中json和DataSet互相转换】

[html] view plain copy
  1. <span style="font-size:14px;">    ///<summary>   
  2.     /// dataTable转换成Json格式   
  3.     ///</summary>   
  4.     ///<param name="dt"></param>   
  5.     ///<returns></returns>   
  6.     public static string DataTable2Json(System.Data.DataTable dt)  
  7.     {  
  8.         StringBuilder jsonBuilder = new StringBuilder();  
  9.         jsonBuilder.Append("{\"Name\":\"" + dt.TableName + "\",\"Rows");  
  10.         jsonBuilder.Append("\":[");  
  11.         for (int i = 0; i < dt.Rows.Count; i++)  
  12.         {  
  13.             jsonBuilder.Append("{");  
  14.             for (int j = 0; j < dt.Columns.Count; j++)  
  15.             {  
  16.                 jsonBuilder.Append("\"");  
  17.                 jsonBuilder.Append(dt.Columns[j].ColumnName);  
  18.                 jsonBuilder.Append("\":\"");  
  19.                 jsonBuilder.Append(dt.Rows[i][j].ToString().Replace("\"", "\\\"")); //对于特殊字符，还应该进行特别的处理。   
  20.                 jsonBuilder.Append("\",");  
  21.             }  
  22.             jsonBuilder.Remove(jsonBuilder.Length - 1, 1);  
  23.             jsonBuilder.Append("},");  
  24.         }  
  25.         jsonBuilder.Remove(jsonBuilder.Length - 1, 1);  
  26.         jsonBuilder.Append("]");  
  27.         jsonBuilder.Append("}");  
  28.         return jsonBuilder.ToString();  
  29.     }  
  30.   
  31.     ///<summary>   
  32.     /// DataSet转换成Json格式   
  33.     ///</summary>   
  34.     ///<param name="ds">DataSet</param>   
  35.     ///<returns></returns>   
  36.     public static string Dataset2Json(System.Data.DataSet ds)  
  37.     {  
  38.         StringBuilder json = new StringBuilder();  
  39.         json.Append("{\"Tables\":");  
  40.         json.Append("[");  
  41.         foreach (System.Data.DataTable dt in ds.Tables)  
  42.         {  
  43.             json.Append(DataTable2Json(dt));  
  44.             json.Append(",");  
  45.         }  
  46.         json.Remove(json.Length - 1, 1);  
  47.         json.Append("]");  
  48.         json.Append("}");  
  49.         return json.ToString();  
  50.     } </span>  

引用：http://www.jb51.net/article/28841.htm


【jquery mobile中图标显示黑点、不显示的问题】

需要在与jquery.mobile-1.3.1.min.css同目录中缺少一个文件夹images，并且放入自带图片ajax-loader.gif

http://blog.csdn.net/wlsyn/article/details/9969487


【jquery mobile html动态添加控件之后没有样式的问题】

动态刷新页面之后没有样式

jQuery Mobile并没有对于新添加的元素进行渲染。这种情况下就需要对元素的样式进行刷新。

使用html添加checkboxlist，然后调用  $("#checkbox").trigger("create"); 进行刷新。不然没有样式。


【jquery mobile html动态添加的控件绑定值却看不到】

文本：$("#mTextBox").textinput();

单选框：$("#radio").attr("checked", true).checkboxradio("refresh")

复选框：$("#checkbox").attr("checked",false).checkboxradio("refresh");

下拉框：$("#mDrpboxSelect").selectmenu('refresh');


【jquery mobile 在IE兼容模式下json.parse 未定义】

用到JSON.stringify来将JSON转成字符串，但悲剧的是IE6与IE7并不支持JSON.stringify。下面我们来简单讲一下如何解决IE6 IE7 JSON.stringify JSON 未定义问题。

在HTML代码中我们也可以使用以下来代码节约流量（IE7+及其它浏览器不加载json2.js）

<!--[if lt IE 8 ]><srcipt src="json2.js"></script><![endif]-->
【压缩和混淆 javascript】

在线压缩和混淆javascript：http://xxoojs.com/

JSMin

YUI Compressor

Google Closure Compiler

UglifyJS

【如何实现html5页面，自动提示添加到主屏幕，并且显示Logo】



【如何实现手机访问Html5页面加载完自动隐藏地址栏】

[html] view plain copy
  1. <span style="white-space:pre">        </span>window.addEventListener('load', function () {  
  2.                         setTimeout(scrollTo, 0, 0, 1);  
  3.                 }, false);  

参考：http://menacingcloud.com/?c=iPhoneAddressBar

http://blog.csdn.net/hbcui1984/article/details/8350107


【Html5网站设置底部“返回顶部”层的出现和消失】

[html] view plain copy
  1. window.addEventListener('scroll', function(){  
  2.     if (document.body.scrollTop > document.documentElement.clientHeight) {  
  3.         document.querySelectorAll('.md-totop')[0].style.display='block';  
  4.     }else{  
  5.         document.querySelectorAll('.md-totop')[0].style.display='none';  
  6.     }  
  7. });  


【Html5调用webservice时出错】

jquerymobile调用本地ajax webservice时，本地调试没有问题，发布到服务器上之后IE浏览器访问也没有问题，但是其它浏览器访问时出现错误

{"Message":"身份验证失败。","StackTrace":null,"ExceptionType":"System.InvalidOperationException"}

CodeBehind="~/App_Code/wbsjQueryMobile.cs"


解决办法：

webconfig中form验证出了问题，应该把下面这段去掉

    <authorization>
      <deny users="?"/>
    </authorization>


【Html5跨域POST数据时出错】

                    $.ajax({
                        url: "http://xx.hzit.org/***.php",
                        type: "POST",
                        contentType: application/x-www-form-urlencoded,
                        data: "wenjuan_id=" + swenjuan_id ,
                        timeout:5000,
                        success: function (data) {
                            alert(data);
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            alert(2 + errorThrown);
                        }
                    });

XMLHttpRequest cannot load http://xx.***.org/index.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:12182' is therefore not allowed access.

JQuery的Ajax跨域请求的解决方案：

跨域只能使用JSONP来实现，或者通过服务器端获取

参考：http://blog.csdn.net/net_lover/article/details/5172509

http://www.clanfei.com/2012/08/1637.html

http://www.cnblogs.com/sunxucool/p/3433992.html

或者使用jQuery插件jQuery-JSONP来解决

参考：http://www.cnblogs.com/dudu/archive/2012/12/04/jquery-jsonp-attention.html

http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html

最终我是通过第二种方法解决的

                    $.jsonp({
                        url: 'http://xx.***.org/index.php?g=Wap',
                        data: { id: sid },
                        callbackParameter: "callback",
                        success: function (data) {
                            if (data == "1") {
                            } else if (data == "0") {
                            }
                        },
                        error: function (xOptions, textStatus) {
                        }

服务器后台接收数据当然也需要做调整

【微信浏览器关闭当前窗口window.close();无效】

微信开发内置浏览器JS自动关闭当前页面回到微信对话窗口

onclick="WeixinJSBridge.call('closeWindow');"

但问题来了，其它浏览器无法关闭窗口，怎么解？

【移动时代的前端加密】

移动时代的前端加密


【正确的使用get和post 】

当且仅当form是幂等的时候，使用get。 
幂等：多次相同的请求产生的副作用，和一次请求的副作用相同。 
如果提交请求纯粹只是从服务器端获取数据而不是进行其他操作，并且多次提交不会有明显的副作用，应该使用get。 
比如：搜索引擎的查询(http://www.google.com/search?q=abc)和分页(user.do?page=1) 

如果提交这个请求会产生其他操作和影响，就应该使用post。 
比如：修改服务器上数据库中的数据；发送一封邮件；删除一个文件等 

另一个要考虑因素是安全性。 

若符合下列任一情况，则用post方法： 
a.请求的结果有持续性的副作用，例如：数据库内添加新的数据行。 
b.若使用get方法，则表单上收集的数据可能让URL过长。 
c.要传送的数据不是采用ASCII编码。 

若符合下列任一情况，则用get方法： 
a.请求是为了查找资源，html表单数据仅用来搜索。 
b.请求结果无持续性的副作用。 
c.收集的数据及html表单内的输入字段名称的总长不超过1024个字符。 

【三分屏课件制作软件】

三分屏课件制作软件其实非常少的，绝大部分是录制软件。我用过的三分屏课件制作软件主要有这么几个：Articulate、串流大师、三分屏课件制作系统--德威课件大师，客观说都不赖。Articulate、串流大师属于功能比较综合，专业性挺好，但使用起来略显复杂，不太容易掌握，串流大师不够稳定，容易报错。德威课件大师目的性强，专注于三分屏课件合成，这方面做得细致、易用些，再有较之前两者，属于本土软件，售后、持续改进方面比较迅速些。综合比较下来，我建议你使用德威课件大师：性价比、易用性以及服务升级方面都是最优的。

【Html5登陆出错】

Html5在Visual Studio调试时没有问题，但是一部署在IIS环境中就出现访问ajax webservice出错

(401) Unauthorized

401 - 未授权: 由于凭据无效，访问被拒绝。

最后通过Chrome调试查出原因，是引用了两个不用的资源文件，路径有问题。不明白的是在Visual Studio调试时不会报错。

        <link href="asse/css/***.css" rel="stylesheet" type="text/css">
        <script src="assets/js/***.js"></script>

【Html5登陆出错】

Html5通过本目录下的Webservice的wbsjQueryMobile.asmx调用webservice时出现如下错误：

"{"Message":"处理请求时出错。","StackTrace":"","ExceptionType":""}"

(401) Unauthorized

找了好多原因，最后查到没有在webconfig添加访问权限  

<location path="Webservice">
    <system.web>
      <authorization>
        <allow users="*" />
      </authorization>
    </system.web>
  </location>

奇怪的是，IE有时不用添加可以登录。


【javascript调试错误】

导航菜单加入下面这段时，IE调试时会出错。

blur:expression(this.onFocus=this.blur()); 

问卷调查Html5开发总结

而此段代码的作用是清除 A 链接在点击时会产生虚线的问题，但是IE下会出错

注意:不是非常需要，一般不建议使用expression，因为expression对浏览器资源要求比较高。

【html jquerymobile listview 中超出文字换行问题】

问卷调查Html5开发总结

如上图，用listview展示数据时难免会超出屏幕范围，一直没找到好办法，使用下面方法可以解决：

在<a>标签后加上一个可以换行的样式<h3 style="white-space:pre-wrap;">湖北黄麦.....<h3>

经过测试发现只有IE不支持这种写法，其它浏览器可用


【html 上传照片调用UploadMinimal.aspx】

出错弹出登陆界面窗口

因为是没有权限访问这个模块，需要在webconfig中添加

<location path="UploadMinimal.aspx">
<system.web>
<authorization>
<allow users="*" />
</authorization>
</system.web>
</location>

【html 上传并传输照片到服务器目录】

弹出错误“对路径'D\filepath'的访问被拒绝”

或者“未能找到路径的一部分”

有的时候需要检查下file.SaveAs(strDirInfo);后面的路径是否正确，不一定是文件权限问题。


【收藏网站】

iOS 推荐快速制作app icon的神器和步骤详解

运营入门：从0到1搭建数据分析知识体系

一个靠谱的数据分析师是怎样炼成的？

RESTful 架构风格概述

RESTful Web 服务：教程

为什么选择这样的大数据平台架构？


作者：水煮鱼

出处：http://blog.csdn.net/panfb227


相关标签： Html5 webapp 问卷调查APP 离线应用

上一篇： 基于JS的问卷调查

下一篇： 用Django建立能在网页上投票的问卷调查

推荐阅读