JavaScript
QQZone 分享 UTF-8 编码的 HTML5 页面乱码解决方案
今天一个朋友让帮忙看看页面分享的乱码问题。使用的是JiaThis的分享插件。一切都完美无缺，除了 QQZone 分享的乱码问题。 http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=xxx 其中，xxx 就是要分享的网址了。但是对于 Doctype 声明为 HTML5 并且 UTF-8 编码的页面，提取页面title和description出现乱码。为啥单单 UTF-8 的乱码？GB2312的却没事儿呢？ 可能的原因是，腾讯的这个空间分享工具，是根据页面的 HTML 编码声明语句来正则匹配得到当前页面的编码的。如果匹配到，则使用页面设定的编码，否则将使用GB2312的编码。 XHTML 1.0 中标准的编码声明：
|
1 |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
HTML5 中的编码声明：
|
1 |
<meta charset="utf-8"> |
由于该页面使用的是 HTML5 的 doctype，导致获取页面编码失败，默认使用GB2312编码，才出现了乱码问题。那么如何解决呢？显然是更换 Doctype 为 XHTML 1.0的咯。 真不明白，为啥一个页面明明没有用到 HTML5的任何特性，却要声明为 HTML5 的 Doctype. 莫非这就是传说中的NC … 更改好编码之后，仍然是乱码，由此猜想可能是腾讯的服务器端做了数据缓存。咋办呢？换个页面地址？一般来说这样是可行的。不过今天的情况有点不一样。产品已经推出，宣传上都是用的现有地址，如果更改了页面地址，肯定要流失不少点击量。 借鉴一下我们针对图片和JS，CSS等页面资源文件缓存的处理办法，给页面地址加个QUERY STRING。例如，地址原来是：
|
1 |
http://www.abc.com/ |
更改为
|
1 |
http://www.abc.com/?v1 |
不过这个地址貌似不太好看呐。所以就想取个折中方案。在浏览的时候，使用原始地址，而在分享的时候，使用下面的带有Query String 的地址以防止使用缓存数据。 由于 JiaThis 插件是第三方站的 JS 生成的，所以我们需要确保在插件完成初始化之后，对其进行事件的重新绑定。这里可以使用setInterval 或者 setTimeout [...]
延迟 Image 加载Lazy Image Jquery 插件
在雨林木风系统门户页面源码看到的，记录一下，备用。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
/*
* 作者:zen (346816084@qq.com)
* 图片延迟加载脚本
* 适用于图片较多的页面.可加快页面的加载速度,同时节省一部分流量
*
* 使用方法:
* 该脚本依赖于jQuery1.3+以上
* 延迟加载的图片的src统一为一个1*1像素的透明图片.同时将宽高预设好.将图片的真实地址放在自定义属性"rsrc"中.
*
* 例: <img class="lazy-image" src="空白图片路径" rsrc="真实图片路径" height="300px" width="500px" alt="" />
*
* 在页面的document加载完成后,加载该脚本,同时用下列的命令开始运行脚本
*
* 例:var lazyImage=$(".lazy-image").lazyImage();
*
* 手动执行图片加载:
* lazeImage.reloadImage();
*/
jQuery.fn.extend({
lazyImage:function(){
var _self=this,
scrollTop,
interval,
lazy=400;
//判断页面是否发生了滚动
var scrollWindow=function(){
var ran=getViewRang();
if(ran.y!=scrollTop){
loopLoad(ran);
}
//所有图片加载完成,停止事件监听
if(_self.length>0){
interval=setTimeout(arguments.callee,lazy);
}
};
//循环队列加载图片
var loopLoad=function(){
var temp=[],
ran=getViewRang();
_self.each(function(i,n){
if(isOver(ran,$(this))){
temp.push(this);
loadImage($(this));
}
});
scrollTop=ran.y;
//将已读取对象清除出队列
_self=_self.not(temp);
}
//获取视口范围
var getViewRang=function(){
return {
y:$(document).scrollTop(),
height:$(window).height()
}
};
//是否在视口范围内
var isOver=function(ran,obj){
var offset=obj.offset(),
//objHeight=obj.height()?obj.height():obj.attr("height"), //隐藏元素需要height属性的支持,否则不能加载
objHeight=obj.height(),
overX=overY=false;
if(offset.top<(ran.y+ran.height)&&(offset.top+objHeight)>ran.y){
overY=true;
}
return overY;
};
//读取真正的图片
var loadImage=function(obj){
obj.attr("src",obj.attr("rsrc"));
return obj;
}
scrollWindow();
return {
reloadImage:function(){
loopLoad();
}
}
}
}); |
在线运行PHP、C#和JavaScript代码的网站
CodeRun http://www.coderun.com/ide/ 提供在线执行PHP、C# 和 JavaScript 代码的功能，想要调试代码但是手边又没有现成可用的环境时，可以应急使用。
Javascript checkbox 级联选择插件
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 |
function Selection(settings){
this.settings = {
checkbox_name : 'checkboxName[]',
class_prefix : 'chkbox_',
id_prefix : 'chkbox_',
id_offset : 1
};
if(settings === undefined || settings.data === undefined || settings.data.length == 0){
alert('No data for rendering');
return false;
}
else if(settings.renderTo === undefined){
alert('No container for rendering');
return false;
}
else{
if(settings !== undefined){
for(var pro in settings){
this.settings[pro] = settings[pro];
}
}
}
if(this.__init__ === undefined){
Selection.prototype.render = function(){
if(this.settings.renderTo !== undefined){
this.settings.renderTo.innerHTML = this._generateHTML(this.settings.data);
}
var checkboxes = this.settings.renderTo.getElementsByTagName('input');
if(checkboxes.length){
for(var i = 0; i < checkboxes.length; i++){
if(checkboxes[i].type !== undefined && checkboxes[i].type == 'checkbox'){
_this = this;
checkboxes[i].onclick = function(){
if(this.parentNode.parentNode !== _this.settings.renderTo){
var _parents = _this._getParentNode(this);
if(_parents.length){
for(var j = 0; j < _parents.length; j++){
_this._checkChildrenChecked(_parents[j]);
}
}
}
_this._checkChildren(this);
_this._changeOptionName();
}
}
}
}
}
Selection.prototype._getParentNode = function(o){
if(o.parentNode.parentNode === this.settings.renderTo){
return new Array();
}
else{
var checkboxes = o.parentNode.parentNode.getElementsByTagName('input');
if(checkboxes.length){
var temp = new Array();
for(var i = 0; i < checkboxes.length; i++){
if((checkboxes[i].parentNode === o.parentNode.parentNode) && (checkboxes[i].type !== undefined) && (checkboxes[i].type == 'checkbox')){
temp.push(checkboxes[i]);
}
}
return temp;
}
else{
return new Array();
}
}
}
Selection.prototype._getChildNodes = function(o){
var checkboxes = o.parentNode.getElementsByTagName('input');
if(checkboxes.length){
var temp = new Array();
for(var i = 0; i < checkboxes.length; i++){
if((checkboxes[i].parentNode.parentNode === o.parentNode) && (checkboxes[i].type !== undefined) && (checkboxes[i].type == 'checkbox')){
temp.push(checkboxes[i]);
}
}
return temp;
}else{
return new Array();
}
return checkboxes;
}
Selection.prototype._checkChildrenChecked = function(o){
var childNodes = this._getChildNodes(o);
if(childNodes.length){
var isAllSelected = true;
for(var i = 0; i < childNodes.length; i++){
if(!childNodes[i].checked){
isAllSelected = false;
break;
}
}
if(isAllSelected){
o.checked = true;
}else{
o.checked = false;
}
}
if(this._getParentNode(o).length){
for(var i = 0; i < this._getParentNode(o).length; i++){
this._checkChildrenChecked(this._getParentNode(o)[i]);
}
}
}
Selection.prototype._checkChildren = function(o){
var childNodes = this._getChildNodes(o);
if(childNodes.length){
for(var i = 0; i < childNodes.length; i++){
childNodes[i].checked = !!o.checked;
if(this._getChildNodes(childNodes[i]).length){
this._checkChildren(childNodes[i]);
}
}
}
}
Selection.prototype._changeOptionName = function(){
var checkboxes = new Array();
var inputs = this.settings.renderTo.getElementsByTagName('input');
if(inputs.length){
for(var i = 0; i < inputs.length; i++){
if(inputs[i].type !== undefined && inputs[i].type == 'checkbox'){
checkboxes.push(inputs[i]);
}
}
if(checkboxes.length){
for(var i = 0; i < checkboxes.length; i++){
var _isParentsSelected = false;
var _parents = this._getParentNode(checkboxes[i]);
if(_parents.length){
for(var j = 0; j < _parents.length; j++){
if(!!_parents[j].checked){
_isParentsSelected = true;
break;
}
}
}
if(_isParentsSelected === false && !!checkboxes[i].checked){
checkboxes[i].name = this.settings.checkbox_name;
}else{
checkboxes[i].name = '';
}
}
}
}
}
Selection.prototype._generateHTML = function(data, i, isParentSelected){
var html = '';
var index = (i === undefined) ? 1 : i;
var parentSelected = (isParentSelected === undefined) ? false : !!isParentSelected;
if(data.length !== undefined){
for(var i = 0; i < data.length; i++){
html += this._generateHTML(data[i], index, parentSelected);
}
}
else{
var checked = ((data.isSelected !== undefined && data.isSelected) || parentSelected) ? true : false;
for(var pro in data){
if(pro != 'isSelected' && pro != 'childNodes'){
html += '<div class="' + this.settings['class_prefix'] + index + '"><input type="checkbox" name="' + (!parentSelected ? this.settings.checkbox_name : '' ) + '" value="' + pro + '"' + (checked ? ' checked="checked"' : '') + ' id="' + this.settings['id_prefix'] + this.settings['id_offset'] + '"/> <label for="' + this.settings['id_prefix'] + this.settings['id_offset'] + '">' + data[pro] + '</label>';
this.settings['id_offset']++;
}
}
if(data.childNodes !== undefined && data.childNodes.length){
html += this._generateHTML(data.childNodes, ++index, checked);
}
html += '</div>';
}
return html;
}
Selection.prototype.__init__ = true;
}
} |
使用方法：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Select Plugin Demo</title>
<style>
.chkbox_2, .chkbox_3{padding-left:25px;}
</style>
</head>
<body>
<form method="post" action="index.html">
<div id="selectWrapper"></div>
<input type="submit" name="submit" value="提交" />
</form>
<script type="text/javascript" src="./script/mad.selection.plugin.js"></script>
<script type="text/javascript">
// 以下为测试代码
var data = [{
1:'Andorid',
isSelected:true,
childNodes:[]
}, {
2:'Ophone'
}, {
3:'iPhone OS',
isSelected:true,
childNodes:[{
31:'iPhone OS(iPod Touch/iPhone)-3.0',
childNodes:[{
311:'xxx'
}, {
312:'yy'
}]
},{
32:'iPhone OS(iPod Touch/iPhone)-3.1',
isSelected:false
}]
},{
4:'Andorid2',
isSelected:true,
childNodes:[]
}];
var renderTo = document.getElementById('selectWrapper');
var o = new Selection({renderTo:renderTo, data:data});
o.render();
</script>
</body>
</html> |
Discuz! X1.5 在 IE 6 下 png 格式 logo 不透明解决方案
大家都知道，IE 6 不支持 png-24 的半透明效果，因此导致 IE 6 浏览器下 Discuz! X1.5 的 png-24 格式 logo 不透明，灰暗色的背景很是让人郁闷。如何解决呢？其实有几个方案可供选择： 1. 修改模板文件，将 logo 文件修改为 gif 格式 (有点麻烦，不利于后续的 Discuz! X 1.5 版本升级，你懂的) 2. 保存 logo 图片为 png-8 而非默认的 png-24 (可能会有白色毛边，不够完美) 3. 针对 IE 6 浏览器，使用滤镜方案。 这里，我们针对第三种方案来实施。其实滤镜的解决方案可以自己写，也可以借助现有的 JS 插件来实现。 DD_belatedPNG 就是一个流行的解决IE6浏览器下背景不透明的 JavaScript 插件。由于使用滤镜会对浏览器的渲染性能造成一定的影响，因此我们这里只对出现该问题的 IE 6 浏览器进行 Hack. 1. 在 Discuz! X1.5 的后台管理中，依次点击“全局” [...]
动态创建 script & 动态修改 script scr 属性
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试脚本</title>
</head>
<body>
<script type="text/javascript"><!--
// 动态创建script
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = './script_a.js';
document.getElementsByTagName('head')[0].appendChild(script);
// src变化了，但是js不执行
/*
setTimeout(function(){
document.getElementsByTagName('script')[0].src = './script_b.js';
}, 3000);
*/
setTimeout(function(){
document.getElementsByTagName('head')[0].removeChild(script);
script = null;
// 在script_a.js中定义的_var仍可用, 新的script_b也会执行
alert(_var);
script = document.createElement('script');
script.type = 'text/javascript';
script.src = './script_b.js';
document.getElementsByTagName('head')[0].appendChild(script);
setTimeout('alert(_var)', 3000);
}, 3000);
//-->
</script>
</body>
</html> |
JavaScript 刷新页面的几种方法总结
1. history.go(0) 2. location.reload() 3. location = location 4. location.assign(location) 5. document.execCommand(‘Refresh’) 6. window.navigate(location) 7. location.replace(location) 8. document.URL = location.href
IE浏览器下iframe空白的原因再讨论
本博客之前讨论了IE浏览器下iframe空白的解决方案，最优的解决方案是在事件处理函数最后添加 return false 语句。 后来通过使用 HttpWatch 工具查看请求过程，发现其实是因为 iframe 的请求地址被 abort 掉了，转而去请求 a 标签中的 href 地址，而恰此时 href 中的地址是个无效的地址“javascript://” ，因此页面才出现了空白。这是一个 IE6 的 bug。 为了更好的理解这个原因, 请运行下面的代码:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Main Page - 请在 IE 6 浏览器下测试该页面</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
function openIframe(){
$('#iframewrapper').append('<iframe src="http://www.baidu.com/"></iframe>');
}
</script>
</head>
<body>
<a href="javascript://" onclick="openIframe();">Open Invisible Iframe (Only for MSIE 6)</a>
<a href="http://www.google.com/" onclick="openIframe();">Open Visible Iframe</a>
<div id="iframewrapper">
</div>
</body>
</html> |
关于 jQuery 1.4.4 中 function( window, undefined ) 写法的原因讨论
今天在读 jQuery 1.4.4 版本代码的时候，发现下面的写法：
|
1 2 3 |
(function( window, undefined ) {
... // code goes here
})(window); |
window 肯定是没问题， 表示 BOM 浏览器对象模型中的 window 对象。但是这里为什么会有一个名为 undefined 的形参呢？起初的时候很不理解。去技术群请教了一下，才真正理解了这里的原因。 原来，Javascript 中的 undefined 并不是作为关键字（全部Javascript关键字列表）出现的。因此可以允许用户对其赋值。例如：
|
1 |
var undefined = 'myValue'; |
如此一来，假如 jQuery 中使用下面的写法：
|
1 2 3 |
(function( window ) {
... // code goes here
})(window); |
必然造成中间代码里的 undefined 遭到污染。因为在默认情况下，对于一个未定义的变量，它的值应该是 undefined，假如用户使用形如
|
1 2 3 4 |
var undefined = 'myValue';
// 或者
window.undefined = 'myValue'; |
的代码进行赋值，那么，jQuery 中的 undefined 的值就变成了用户指定的值（这里是字符串 ‘myValue’）。这样会造成 jQuery 内部异常。 而 jQuery 采用的这种写法，就很好的避免了这个问题。在执行匿名函数的时候，只传递一个参数 window, 而不传递 undefined，那么函数体中的 undefined 局部变量的值，刚好就是 undefined. 甚为巧妙啊。