今天用一个很龌龊的办法解决了 iframe 切换页面会闪烁的问题

在网页中使用 iframe 链接直接将页面显示在iframe中,这个方法在很多浏览器会在点击链接后iframe瞬间变成全白,由此造成闪烁,目前据我所见,除了 FireFox 之外所有浏览器都会这样

虽然这是浏览器行为,属于正常程序范畴,不过来自上面的压力下最后还是通过一个很龌龊的办法避免了闪烁 = =
具体代码就不写了,简单说说思路:

iframe闪烁其实载入页面的正常现象,就好像直接点击链接在新窗口打开页面,开始都是白色的。

载入新页面的动作是在点击链接后马上开始的,虽然页面还没有载入,但是 iframe 的 src 已经跳到了新页面,自然同时老页面已经消失,这样会造成短暂的内容中空期,解决这个的办法就是让新页面先载入,老页面却不消失,直到新页面载入完成再替换掉老页面。

我用的方法就是建立一个临时 iframe 并且藏起来,在其中载入新页面,当这个页面载入完成后删除老的iframe,将临时 iframe 显示出来,这样就避免了中空期的出现,在新页面载入完成前老页面一直显示着,删除元素和元素显示是非常快速的 JS 操作,不会有闪烁的感觉,虽然方法很龌龊…但是的确解决了问题。

隐藏 iframe 的办法,我不是直接display: none,而是设置宽高都为1px,然后设置position: absolute,这样页面是不可能看到这个临时 iframe 的,至于为什么如此,是因为 iframe 可能会有一些 JS 操作涉及到内部元素的宽高等判断和变化,如果直接 display:none 会获得错误的值(例如负数)。

11月22日添加:

在实际测试后发现这个方法是好用,但是会造成IE下的内存占用激增,这是IE本身的bug,删除一个DOM元素后如果窗口不关闭并不会释放内存,由此造成内存泄露,所以干脆直接放两个iframe,轮流显示,好处是不会改变DOM树,基本上就不存在上面说的内存泄露问题了,实际测试情况良好…不过…方法更龌龊了= =

jQuery 在 Opera 9.60 以上版本中的一个 bug

jQuery 中 $(window).height() 获取窗口高度在 Opera 9.60 以上的版本中是错误的,jQuery bug tracker 中有人提交这个问题两个月也没见修复,只好自己修复一下咯….

最简单的办法就是把
jQuery.browser.opera && document.body[ "client" + name ] ||
改成
jQuery.browser.opera && document.body[ "inner" + name ] ||

不过考虑兼容性还是改成了
jQuery.browser.opera && (jQuery.browser.version >= 9.6 && document.body[ "inner" + name ] || jQuery.browser.version < 9.6 && document.body[ "client" + name ]) ||

其实这样也未必能够保证在 Opera 所有的版本下都正确,至少看起来应该是可以解决问题地

添加 TAG 用的表单处理 JS

TextCube 里面添加 Tag 的表单处理效果很有意思,我仿照那个效果写了一个 JS 用于正在写的项目中,经过n个小时的努力终于完成了,前前后后改了 n 遍,只是兼容 Firefix、IE、Opera 就累的够呛了>_<

虽然效果和 TextCube 里面是一样的,但是代码都是偶自己写的哦(路人:难怪这么烂 …╥﹏╥)

发表出来大家看看吧,顺便帮忙测试看看有没有什么 Bug

本JS的优点:

  1. 小 ,只有7KB,TextCube 同样功能的 JS 为 18KB,压缩后会更小(注1)
  2. 可以用于同一页面的多个 input 表单,对 input 是否有 ID,name 是否相同,以及所处的位置没有任何要求
  3. 不需要对原始表单做太多的处理,仅仅需要在 class 中加上 tag_input,在提交的时候执行一下 tagInput.submitForm();(注2)
  4. 对于表单来说是透明的,保留了原始表单的 class 样式,服务器端脚本所需要做的处理和没有 JS 时一样

注1:TextCube 那个 JS 里面还包含自动完成提示,而偶这个还需要一个公用 JS 2.7KB = =b,实际上这个公用 JS 就是我在项目中用的,我项目中实际用的公用 JS 比这个要大多了…23KB左右,这个只是包含了 tag.js 中用到的函数

注2:当然不执行也没关系,不过不执行的话你还放在添加 input 里的文字会被舍弃,具体看你自己选择了

e…..应该说缺点至少有一个…暂时还不能用于多个表单 = =b ,貌似…一般一个页面也就只需要一个添加 Tag 的地方吧^^a

https://www.flyinghail.net/sample/tag/index.php

10/18 修改:

  1. 转换全角空格为半角空格
  2. 将多个空格转换成一个空格
  3. 过滤特殊字符 0173(感谢小M )、0127

10/21 修改:

  1. 支持多个 Tag 添加表单
  2. 不需要事先知道需要处理的表单 ID,仅仅需要在表单的 class 中添加 tag_input 程序会自动识别
  3. 编辑时 ESC 为还原

IE5/6 支持 position:fixed 的方法

这个方法来自:http://bassistance.de/

主要是解决 IE5/6 下不支持 position:fixed 的问题。网上有朋友提到这个方法,但是给出的方案并不完整,效果没有达到原站的完美的状态,我昨天分析了一下原站的 CSS 整理出这个方法:

https://www.flyinghail.net/sample/fixed.html

自行查看源代码吧。网上已有的文章中主要是漏掉了 body 中的 background-attachment: fixed; 和 background-image: url(); 非常奇妙,有了这两个 CSS,IE5/6 下的移动效果就非常完美,如果没有则….有兴趣的朋友自己试试吧。

如果你打算应用 position:fixed 的元素不是 body 的直接子元素,那么注意这个元素的父元素也需要上面两个 background 设置否则移动也是不完美的。

除此之外还有一种隐藏 html 的滚动条,保留 body 滚动条的解决方法,不过那个方法下 IE5/6 里所有的 absolute 都变成了 fixed,显然这样是不合适的,所以我认为当前方法是最完美的。

2007.10.19 在IE5.01、5.55、6.0下均测试通过^^

xajax中文手册(HonestQiao第一版,FlyingHail修改版)

  最近要用xajax,从网上找到了HonestQiao(乔楚)翻译的xajax中文手册第一版(因为引用地方太多,最初出处不可考了- -b),发现对应当前的版本已经不是太合适了,所以参考着xajax的wiki对该文进行了一些修改和补充:补充xajaxResponse类中方法的说明、添加“如何创建Loading…信息?”、“如何改变xajax的编码设置?”两项,都不是完整的原文翻译,主要是在个人理解的基础上描述的。
继续阅读“xajax中文手册(HonestQiao第一版,FlyingHail修改版)”

PHP与Javascript之间复杂结构数据的传递

说道Ajax其实质就是通过Javascript向服务器提交请求,获得服务器返回的信息,然后再使用Javascript进行处理,更新网页,从而实现最明显的表现,无刷新更改网页内容。其中Jvascript与服务器脚本语言之间的信息传递是很重要的一个部分,一般来说这一部分应该由XML承担,但是一般却不一定非得传递XML,数组、字符串甚至对象也都可以传递,这里讨论一下PHP和Javascript之间复杂结构数据的传递问题。
继续阅读“PHP与Javascript之间复杂结构数据的传递”

Sajax 0.11

  Sajax有0.11哦,不过官方并没有发布,只是在论坛有下载,这个版本相对于0.10最大的好处是可以自动将PHP的变量格式转换成JS的格式,也就是说不需要使用JSON也不需要使用其他的手段就可以传递数组或者对象。这里提供Sajax0.11的压缩包,同时修正了无法使用POST方式传递参数的Bug,这个Bug估计很多人都会遇到,官方论坛也有解决方法,但是0.10和0.11的压缩包中却都没有修正这个问题:icon_em06:。

  Sajax0.11压缩包

xajax类的方法

  前一段时间研究过Sajax,现在发现这个xajax也蛮有趣的,特别是xajax不需要再自己写javascript部分,对于我这样的js苦手也算是不错的选择,而且可以更方便的实现逻辑与界面的分离,缺点就是因为类做了太多原来由人来做工作,所以灵活性就要差一些了~现在的Ajax的框架程序还真是蛮多的~贪多不好不过多掌握一点知识也没有什么吧,谁知道以后会碰上什么情况呢?

  本文主要内容转载自“我是豬,哼哼!”的“xajax基础心得”

  只转载了我认为有用的部分,也就是xajax中方法的介绍,不过似乎不是很全,等以后再完善一下。
继续阅读“xajax类的方法”