JavaScript中的addEventListener自定义事件

2018-9-17 liyangweb.com 李杨 JavaScript

说到JavaScript事件,我们首先就能想到click事件、submit事件等等。但是有时候这些预定义的事件并不能满足我们的需求,比如在提供给第三方的SDK中。

由于SDK运行的环境非常复杂,第三方业务中有什么代码我们无法预知,这可能会导致事件冲突的问题,这时候我们就需要自定义事件来避免此类冲突了。

阅读全文>>

标签: addEventListener自定义事件

评论(1) 浏览(43)

js多级返回上一级页面时出现的死循环解决方法

2018-5-2 liyangweb.com 李杨 JavaScript

history.go(-1)是js返回上一级的方法,很容易实现让页面从哪来回哪去,简单好用,但是如果我们有多级页面,这个方法会出现死循环。

比如我们访问页面的顺序是A->B->C,在C页面点击返回,会跳到B页面,在B页面再点击返回,就到了C页面,并不是我们期望的A页面,这样就出现了死循环,导致无论如何我无法返回到A页面。

解决方法:

阅读全文>>

评论(1) 浏览(522)

PHP分片上传

2018-4-22 liyangweb.com 李杨 JavaScript

PHP的上传受一些配置的影响,一般默认上传最大文件为8M,如果我们需要上传一个10M的文件怎么做呢?

简单实现的话,我们可以通过修改PHP的配置文件来实现:

upload_max_filesize = 2M //PHP最大能接受的文件大小
post_max_size = 8M //PHP能收到的最大POST值'
memory_limit = 128M //内存上限
max_execution_time = 30 //最大执行时间
但是如果我们需要上传一个100M的文件呢?单纯修改上面的配置是不行的,即使测试中能把文件传上去,等到生产环境多个用户一起访问,服务器配置再强大也得挂掉。

所以我们就需要在前端把文件拆分开,也就是所谓的分片上传。

分片上传用到了一些HTML5的新特性,所以对于一些比较老的浏览器就不能用了,我们可以提示用户去下载现代浏览器,或者使用flash来做兼容,本示例中,我们不考虑兼容问题,默认用户在使用现代浏览器。

阅读全文>>

标签: PHP分片上传 js分片上传 PHP大文件上传

评论(2) 浏览(564)

jquery解析链接

2017-9-7 liyangweb.com 李杨 JavaScript

有时候我们需要分析一个url,在使用PHP和node.js时都有非常方便的方法/模块,但在JS我好像没发现什么好的方法,通过查找,在jQuery中发现了一个比较方便的方法。

示例如下:

阅读全文>>

标签: Jquery

评论(2) 浏览(908)

js中声明函数及调用

2017-1-31 liyangweb.com 李杨 JavaScript

方式一(最常见的方式):

function fun1(param1, param2) {
    console.log(param1);
    console.log(param2);
}
fun1(111,222);

阅读全文>>

标签: JavaScript js

评论(0) 浏览(1179)

artTemplate的一个入门demo,天气预报

2016-9-28 liyangweb.com 李杨 JavaScript

下面的小demo,主要是为了演示一下基本用法,如果在js中拼接html,将是一件非常痛苦的事情。

项目主页:

https://github.com/aui/artTemplate


实例代码:

<!DOCTYPE html>
<html>
<head>
	<title>index</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
	<script type="text/javascript" src="https://raw.githubusercontent.com/aui/art-template/master/lib/template-web.js"></script>
	<style type="text/css">
		table.gridtable {
			font-family: verdana,arial,sans-serif;
			font-size:11px;
			color:#333333;
			border-width: 1px;
			border-color: #666666;
			border-collapse: collapse;
		}
		table.gridtable th {
			border-width: 1px;
			padding: 8px;
			border-style: solid;
			border-color: #666666;
			background-color: #dedede;
		}
		table.gridtable td {
			border-width: 1px;
			padding: 8px;
			border-style: solid;
			border-color: #666666;
			background-color: #ffffff;
		}
	</style>
</head>
<body>
	<div id="content"></div>
</body>

<script id="weather" type="text/html">
<h1>{{title}}</h1>
{{if status==1000 }}
	<div>温度:{{data.wendu}}℃</div>
	<div>{{data.ganmao}}</div>
	<div>{{data.forecast.length}}日预报:</div>
	<table class="gridtable">
		<tr>
		<th>日期</th><th>天气</th><th>风力</th><th>风向</th><th>最高气温</th><th>最低气温</th>
		</tr>
	{{each data.forecast as row i}}
		<tr>
		<td>{{row.date}}</td><td>{{row.type}}</td><td>{{row.fengli}}</td><td>{{row.fengxiang}}</td><td>{{row.high}}</td><td>{{row.low}}</td>
		</tr>
	{{/each}}
	</table>
	<br>
	<div>昨日天气</div>
	<table class="gridtable">
		<tr>
		<th>日期</th><th>天气</th><th>风力</th><th>风向</th><th>最高气温</th><th>最低气温</th>
		</tr>
		<tr>
		<td>{{data.yesterday.date}}</td><td>{{data.yesterday.type}}</td><td>{{data.yesterday.fl}}</td><td>{{data.yesterday.fx}}</td><td>{{data.yesterday.high}}</td><td>{{data.yesterday.low}}</td>
		</tr>
	</table>
{{else}}
	出错了
{{/if}}
</script>
<script type="text/javascript">
	var url = "http://wthrcdn.etouch.cn/weather_mini";
	var city = "北京";
	$.ajax({
		url:url,
		type:"get",
		dataType:"jsonp",
		data:{
			city:city
		},
		success:function(json){
			json.title=city+'天气预报';
			var data = json;
			var html = template('weather', data);
			$("#content").html(html);
		},
		error:function(){
			alert('error');
		}
	});
</script>

</html>


标签: artTemplate

评论(0) 浏览(1735)

js倒计时,刷新不重记

2016-2-20 liyangweb.com 李杨 JavaScript

js倒计时,实现起来不难,但是刷新往往就重新计算了,如果要实现刷新不重计该如何做呢?有这么几种思路,1:cookie 2:本地缓存 3:window.name ……

前两种比较容易理解,今天我来为大家实现以下使用window.name实现刷新不重计,代码如下:

阅读全文>>

标签: js

评论(3) 浏览(1670)

如何用js得到当前页面的url信息方法(JS获取当前网址信息)

2015-12-8 liyangweb.com 李杨 JavaScript

设置或获取对象指定的文件名或路径。

alert(window.location.pathname)

设置或获取整个 URL 为字符串。

阅读全文>>

标签: JavaScript

评论(0) 浏览(1758)

跨站脚本攻击XSS的原理与预防

2014-7-22 liyangweb.com 李杨 JavaScript

简介:

用户在浏览网站、使用即时通讯软件、甚至在阅读电子邮件时,通常会点击其中的链接。攻击者通过在链接中插入恶意代码,就能够盗取用户信息。攻击者通常会用十六进制(或其他编码方式)将链接编码,以免用户怀疑它的合法性。网站在接收到包含恶意代码的请求之后会产成一个包含恶意代码的页面,而这个页面看起来就像是那个网站应当生成的合法页面一样。许多流行的留言本和论坛程序允许用户发表包含HTMLJavaScript的帖子。假设用户甲发表了一篇包含恶意脚本的帖子,那么用户乙在浏览这篇帖子时,恶意脚本就会执行,盗取用户乙的session信息。

类型:

一. 反射型XSS(非持久型XSS

反射型XSS只是简单地把用户输入的数据“反射”给浏览器。黑客往往需要诱使用户“点击”一个恶意链接,才能攻击成功。

二. 储存型XSS(持久型XSS

存储型XSS会把用户输入的数据“存储”在服务器端。这种XSS具有很强的稳定性。如:黑客将一段恶意JavaScript代码写入博客,那么所有访问该博客的用户,都会在他们的浏览器中执行这段JavaScript代码。

三. DOM Based XSS

这种类型的XSS并未按照“数据是否保存在服务器端”来划分,DOM Based XSS本质上也是反射型XSS。单独划分出来,是因为DOM Based XSS的形成原因比较特别。通过修改页面的DOM节点,形成的XSS,称之为DOM Based XSS

阅读全文>>

标签: JavaScript PHP HTML XSS

评论(0) 浏览(4100)

jQuery对象入门级介绍

2014-6-25 liyangweb.com 李杨 JavaScript

你是否曾经见过像  $(".cta").click(function(){})这样的JavaScrip代码?或许你还会思考下$('#X') 是什么,如果看到这些你都觉得摸不着头脑,那请一定要读完这篇文章。如果你觉得上述的代码片段是不能正常工作的,那请先看一些jQuery的代码范例,你会发现链接中的代码都是这样的结构。

这篇文章将会分析下面代码片段(动画化一个方形)中出现的一些关键知识点。你可能不会经常接触这样的代码,但了解一下这段代码的机制有助于你理解jQuery:

1
2
3
4
5
 $(document).ready(function(){
     $("button").click(function(){
         $("div").animate({height:"toggle"}).append("hi");
     });
 });

我们将会逐字逐句地解释上述的代码,告诉你JavaScript函数、jQuery对象还有事件驱动编程的具体细节。希望看完这篇文章以后,再遇到神秘的jQuery代码时你不会再头疼。

$是什么?

阅读全文>>

标签: JavaScript Jquery

评论(0) 浏览(2407)

Powered by emlog 冀ICP备13011830号-1