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

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

  1. 离线资源缓存:须要一种方式来指明应用程序离线工作时所需的资源文件。

    这样,浏览器才干在在线状态时,把这些文件缓存到本地。此后,当用户离线訪问应用程序时,这些资源文件会自己主动载入。从而让用户正常使用。

    HTML5 

    中,通过 cache manifest 文件指明须要缓存的资源。并支持自己主动和手动两种缓存更新方式。

  2. 在线状态检測:开发人员须要知道浏览器是否在线,这样才可以针对在线或离线的状态。做出相应的处理。

    在 HTML5 

    中,提供了两种检測当前网络是否在线的方式。

  3. 本地数据存储:离线时,须要可以把数据存储到本地。以便在线时同步到server上。为了满足不同的存储需求,HTML5 提供了 DOM Storage 和 Web

    SQL Database 两种存储机制。

    前者提供了易用的 key/value 对存储方式。而后者提供了主要的关系数据库存储功能。

:我的网络应用程序包括了非常多页面。我是否须要在每一个页面都使用manifest属性,或者我能够仅仅在主页中使用?

:你网络server中的每一个页面都须要一个指向缓存名单的为所有应用程序准备的manifest属性。

你的每个HTML页面指向你的缓存名单文件。而且你的缓存名单文件由合适的Content-Type头支持。

但名单文件中有些啥?

这是有趣的事情。

:我须要在我的缓存名单中列出我的HTML页面么?

:是或者不是。

假设你全部的网络应用程序被包括在一个单页面,仅仅须要确认页面通过使用manifest属性指向了缓存名单。当你訪问一个含有manifest属性的HTML页面,页面本身被假设为网络应用程序的一部分,所以你不须要将它本身列入名单文件。

虽然如此,假设你的网络应用程序包括多个页面,你应该在名单文件里列出全部的HTML页面,否则浏览器将不会知道有其它的HTML页面须要下载并缓存。

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

Html5能够说天生为了移动client而存在的,所以开发手机浏览器訪问的应用须要自适应手机屏幕

在网页的<head>中添加以下这句话,能够让网页的宽度自己主动适应手机屏幕的宽度。

<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的升级部分部署到server上,用户执行App后。App会向server讲求获取最新的Web程序并下载执行。这样能够达到跳过各种Store的更新审核。达到高速更新的目的。并且假如用户无法訪问互联网。我们能够让用户使用上一个版本号的程序。不会像纯Web App那样要求用户一定要联网

代码非常安全。众所周知Web应用有一个非常大的问题就是代码安全的问题,但如今我们能够将Web代码所有加密。本地应用解密后再执行,大大的提供了代码的安全性。

2)核心业务数据和逻辑放在后台server处理

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推断client是手机还是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为什么刷新页面会触发近期运行过的一个button事件?

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

解决方法例如以下:

新建一个用户控件

后台代码例如以下

<div style="text-align: left;">using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq; public partial class CheckRefreshed : System.Web.UI.UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }     private bool? _flag;     public bool IsRefreshed
    {
        get
        {
            if (_flag.HasValue)
                return _flag.Value;
            else
            {
                _flag = this.Cache[Num] != null;
                return _flag.Value;
            };
        }
    }     private string _num;
    private string Num
    {
        get
        {
            if (ViewState["num"] == null)
                return Guid.NewGuid().ToString();
            else
                return (string)ViewState["num"];
        }
        set
        {
            ViewState["num"] = value;
        }
    }
    protected void Page_PreRender(object sender, EventArgs e)
    {
        this.Page.Unload += new EventHandler(Page_Unload);
        _num = Num;
        Num = Guid.NewGuid().ToString();
    }     void Page_Unload(object sender, EventArgs e)
    {
        if (_num != null)
            this.Cache[_num] = 1;
    }
} </div>

页面部分就一个声明

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

将这个用户控件拖到你要用的页面

button事件里第一行加上

//推断是否是反复提交
        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转场easy。可是转场后就有非常多事项要注意了,不然你会遇到非常多问题。

①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来进行数据匹配。来模拟实现二维数据。

            var strnid = "note_" + RetRndNum(3);
var notedata = new Object;
notedata.nid = strnid;
notedata.type = $hidtype.val();
notedata.title = $txttitle.val();
notedata.content = $txtacontent.val();
var jsonotedata = JSON.stringify(notedata);
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互相转换

<span style="font-size:14px;">    ///<summary>
/// dataTable转换成Json格式
///</summary>
///<param name="dt"></param>
///<returns></returns>
public static string DataTable2Json(System.Data.DataTable dt)
{
StringBuilder jsonBuilder = new StringBuilder();
jsonBuilder.Append("{\"Name\":\"" + dt.TableName + "\",\"Rows");
jsonBuilder.Append("\":[");
for (int i = 0; i < dt.Rows.Count; i++)
{
jsonBuilder.Append("{");
for (int j = 0; j < dt.Columns.Count; j++)
{
jsonBuilder.Append("\"");
jsonBuilder.Append(dt.Columns[j].ColumnName);
jsonBuilder.Append("\":\"");
jsonBuilder.Append(dt.Rows[i][j].ToString().Replace("\"", "\\\"")); //对于特殊字符,还应该进行特别的处理。
jsonBuilder.Append("\",");
}
jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
jsonBuilder.Append("},");
}
jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
jsonBuilder.Append("]");
jsonBuilder.Append("}");
return jsonBuilder.ToString();
} ///<summary>
/// DataSet转换成Json格式
///</summary>
///<param name="ds">DataSet</param>
///<returns></returns>
public static string Dataset2Json(System.Data.DataSet ds)
{
StringBuilder json = new StringBuilder();
json.Append("{\"Tables\":");
json.Append("[");
foreach (System.Data.DataTable dt in ds.Tables)
{
json.Append(DataTable2Json(dt));
json.Append(",");
}
json.Remove(json.Length - 1, 1);
json.Append("]");
json.Append("}");
return json.ToString();
} </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页面载入完自己主动隐藏地址栏

<span style="white-space:pre">		</span>window.addEventListener('load', function () {
setTimeout(scrollTo, 0, 0, 1);
}, false);

參考:http://menacingcloud.com/?

c=iPhoneAddressBar

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

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

        	window.addEventListener('scroll', function(){
if (document.body.scrollTop > document.documentElement.clientHeight) {
document.querySelectorAll('.md-totop')[0].style.display='block';
}else{
document.querySelectorAll('.md-totop')[0].style.display='none';
}
});

【Html5调用webservice时出错

jquerymobile调用本地ajax webservice时。本地调试没有问题,公布到server上之后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.hzit.org/index.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:12182'
is therefore not allowed access.

解决的方法:

跨域仅仅能使用JSONP来实现,或者通过server端获取

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



版权声明:本文博客原创文章,博客,未经同意,不得转载。

调查问卷Html5发展综述的更多相关文章

  1. "琳琅满屋"调查问卷 心得体会及结果分析

    ·关于心得体会       当时小组提出这个校园二手交易市场的时候,就确定了对象范围,仅仅是面向在校大学生,而且在我们之前就已经有了很多成功的商品交易的例子可以让我们去借鉴,再加上我们或多或少的有过网 ...

  2. JavasScript实现调查问卷插件

    原文:JavasScript实现调查问卷插件 鄙人屌丝程序猿一枚,闲来无事,想尝试攻城师是感觉,于是乎搞了点小玩意.用js实现调查问卷,实现了常规的题型,单选,多选,排序,填空,矩阵等. 遂开源贴出来 ...

  3. 快照(Snapshot)技术发展综述

    快照(Snapshot)技术发展综述 刘爱贵 摘要:传统数据备份技术存在备份窗口.恢复时间目标RTO和恢复时间点RPO过长的问题,无法满足企业关键性业务的数据保护需求,因此产生了数据快照技术.本文对快 ...

  4. 关于“Durian”调查问卷的心得体会

    这周我们做了项目着手前的客户需求调查,主要以调查问卷的方式进行.其实做问卷调查并不是想象中的那么简单,首先要确定问卷调查的内容,每一个问题都要经过深思熟虑,字字斟酌,既要切合问卷主要目的,又要简洁扼要 ...

  5. 从Adobe调查问卷看原型设计工具大战

    近年国内外原型设计工具新品频出,除了拥趸众多的老牌Axure在RP 8之后没有什么大的动作,大家都拼了命地在出新品.今天 inVision 的 Craft 出了 2.0 的预告视频,明天 Adobe ...

  6. Scrum立会报告+燃尽图(十一月十七日总第二十五次):设计调查问卷;修复上一阶段bug

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2284 项目地址:https://git.coding.net/zhang ...

  7. <问吧>调查问卷心得体会

    <问吧>调查问卷心得与体会 在这之前,我们已经组成了一个六个人的小团队---“走廊奔跑队”,我们这次做的这个项目的名称是:问吧.在项目实施之前,我们必做的一步就是需求分析,目的就是充分了解 ...

  8. android 实现调查问卷-单选-多选

    非常久没写东西了.今天来总结下有关android调查问卷的需求实现. 转载请加地址:http://blog.csdn.net/jing110fei/article/details/46618229 先 ...

  9. 自动化测试调查问卷送《QTP自动化测试最佳实践》

    自动化测试调查问卷送<QTP自动化测试最佳实践> http://automationqa.com/forum.php?mod=viewthread&tid=2308&fro ...

随机推荐

  1. Property 和 Attribute 的区别(转)

    property 和 attribute非常容易混淆,两个单词的中文翻译也都非常相近(property:属性,attribute:特性),但实际上,二者是不同的东西,属于不同的范畴. property ...

  2. 全栈JavaScript路(八)得知 CDATASection 种类 节点

    CDATASection 只船舶类型节点 基于XML 文件.演出CDATA 数据. 构造函数: CDATASection function(){[native code]} CDATASection ...

  3. JavaWeb框架的基石

    JavaWeb框架的基石(一) 初学JavaWeb开发,请远离各种框架,从Servlet开始.         Web框架是开发者在使用某种语言编写Web应用服务端是关于架构的最佳实践.很多Web框架 ...

  4. WiX Toolset

    原文:WiX Toolset 公司换软件打包平台,弄了一个月,Wix toolset的中文资料真的不多,逼着自己看了不少英文资料,终于弄懂了WiX打包的过程,做出了满足要求的安装包 一点基本概念:(F ...

  5. Visual Prolog 的 Web 专家系统 (6)

    保存用户响应询价.作为进一步推理的条件 或GOAL段开始.最初的一句是write_startform() write_startform():- write("<form action ...

  6. [Unity3D]Unity3D圣骑士当游戏开发商遭遇Mecanim动画系统

            大家好.我是秦培.欢迎关注我的博客.我的博客地址blog.csdn.net/qinyuanpei. 博主总算赶在这个月底写出了这篇文章.这个月由于期末考试一直没时间研究太多关于技术方面 ...

  7. JavaEE(15) - JPA实体继承

    1. 实体继承映射的三种策略 #1. 整个类层次对应一张表 #2. 连接子类 #3. 每个具体类对应一张表 2. 使用抽象实体 3. 使用非实体父类 4. 重定义子类实体的外键列 ---------- ...

  8. IP地址解析

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.N ...

  9. Nio得知3——该示范基地:多路复用器模式

    Reactor模式和NIO 本文可以看作是Doug Lea Scalable IO in Java一文的翻译. 当前分布式计算 Web Services盛行天下,这些网络服务的底层都离不开对socke ...

  10. 系统ls命令出现1;2cl;2cl;2cl;2c(转)

    1;2c after using cat or more on binary filesI noticed that if you use the hex 05 in a file and cat o ...