3月1日 日常填坑(二)

本来这是3月1日要写的,一直拖到现在,养成一个写博客的习惯好难啊!

1. onscroll事件无效,CSS样式会影响javascript某些事件的发生。
在做一个移动web上拉加载更多,需要监听onscroll事件,但很奇怪一直无效
原因:缺少一个属性overflow:auto/scroll
如果还是没有效果,那么看看css中有没有position的定位,如果有的话,那么绑定的事件的元素还要加上position:relative;(应该没有其他还不生效的情况)



2ajax() 方法通过 HTTP 请求加载远程数据,对接后台数据,一定要注意数据类型,前后台要统一,如果返回的是包含html的,dataType要选用“html”。
dataType
类型:String
预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断,比如 XML MIME 类型就被识别为 XML。在 1.4 中,JSON 就会生成一个 JavaScript 对象,而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后,传递给回调函数。可用值:
"xml": 返回 XML 文档,可用 jQuery 处理。
"html": 返回纯文本 HTML 信息;包含的 script 标签会在插入 dom 时执行。
"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意:在远程请求时(不在同一个域下),所有 POST 请求都将转为 GET 请求。(因为将使用 DOM 的 script标签来加载)
"json": 返回 JSON 数据 。
"jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。
"text": 返回纯文本字符串



3有这样一个需求,需要给用户发一封包含html的邮件,就相当于发一个网页到用户的邮箱里面。刚开始我想的很简单,直接在一个页面里面,写好样式和结构。
<html>
<head>
           <style>
                 .page{}
          </style>
</head>
<body>
         <div class="page"></div>
</body>
</html>
    这样写,我还想后台拿到这个模版,也好处理,不用什么外联css,全部都写在一个html里,然后与其它业务不关联,毕竟发送到邮箱里,是一个很独立的功能,需求也会很稳定。
测试后,在pc端邮箱显示都很正常,跟你直接打开这个hmtl一样的效果。然后在手机邮箱客户端打开,发现整个样式都没有,一看就是css没有加载上,但我都放在一个html,所有排除css文件没有加载上问题。那为什么会不生效呢?
     因为移动端没办法看css源码,我就看看pc端的源码,发现邮箱里的内容不是一个完整的iframe的,就只截取你body里的内容,我就想会不会事因为head被去掉了的原因,然后给几个div写了内嵌样式,发现有效了。按这个逻辑整个都改了一遍,pc看了没问题,还是正常,移动端看了下,有了样式。
      本以为这样就搞定了,呵呵,手贱又测了一下其它邮箱客服端,还是有错乱问题。有的邮箱可以,有的不可以,好吧,这是兼容问题了,只好搜索一下了,一搜吓一跳,这还是一个比较典型的问题,比你妹的浏览器兼容还恶心。最后改成table的方式,在td里面把我之前写好代码放进来,目前测试ok。这里偷了个懒,没有全部用table的布局,只是,在外面套了一个table。如果还有问题,那只能推翻重写用table来布局了,感觉回到了远古时代。这里主要看你们业务需求,我这边只要兼容几个常用邮箱客户端就可以,qq,163,ios自带,安卓自带。如果不知道怎么下手,去你邮箱翻翻有没有这样的邮件,看看它们怎么写的,我参考了阿里云的邮件。
补充一下:不同的邮箱处理机制可能不一样,我这里发现qq邮箱是截取body里的内容,163的是iframe引入的形式。
这里有些参考资料:
HTML电子邮件应该知道的一些事
Responsive Email设计
从头开始构建一个HTML电子邮件模板
编写HTML格式的邮件需注意的地方
各个邮箱客户端对html支持程度
Using CSS and HTML in Email Newsletters
Email Coding 101 Infographic
github上开源相关项目

posted @ 2017-03-14 21:47  Seven72222  阅读(106)  评论(0编辑  收藏  举报