3月1日日常填坑(二)

来源：互联网发布：cloud9 ide java 编辑：程序博客网时间：2024/04/28 05:10

本来这是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上开源相关项目

0 0

3月1日 日常填坑(二)

3月1日日常填坑(二)