思路是读邮件时先将邮件内容write到一个 iframe 元素中,然后通过下面这个函数去得到一些重要的样式值,收集这些值显示写到其style属性里,然后取得其 innerHTML,这样就可以部分保留html片段原先的格式。处理方法如下:
//没考虑兼容性,只支持 getComputedStyle 的浏览器
function traverse (node) {
//定制想收集样式的结点
var nodes = node.querySelectorAll("style,script,div,a,span,table,tr,th,tbody,td,hr,article,section,aside,header,img");
var tempNode;
var cssCollection;
//想收集的属性集合
var needProp = ["background","border","boxShadow","color","content","cursor","display","float",
"font","fontFamily","fontSize","fontWeight",
"height","letterSpacing","lineHeight","margin","opacity","outline","overflow","padding",
"position","src","stroke","textAlign","visibility","whiteSpace","width",
"wordBreak","wordSpacing","wordWrap","zIndex","zoom"];
var i2 = 0, len = 0; //迭代器
var newCssText = ""; //组装新的style属性内容
var l = nodes.length;
if (l < 500) { //如果内容矿长结点过多会影响性能,这里限制为500个以内结点
for (var i=0; i < l; i++) {
tempNode = nodes[i];
cssCollection = window.getComputedStyle(tempNode,null);
if ("STYLESCRIPT".indexOf(tempNode.tageName) > -1) {//remove掉style 和script结点
node.removeChild(tempNode);
} else {
for (i2=0,len=needProp.length; i2 < len; i2++) {
newCssText += needProp[i2] + ":" + cssCollection[needProp[i2]] + ";";
}
tempNode.style.cssText = newCssText;
}
}
}
return node.innerHTML;
}
function traverse (node) {
//定制想收集样式的结点
var nodes = node.querySelectorAll("style,script,div,a,span,table,tr,th,tbody,td,hr,article,section,aside,header,img");
var tempNode;
var cssCollection;
//想收集的属性集合
var needProp = ["background","border","boxShadow","color","content","cursor","display","float",
"font","fontFamily","fontSize","fontWeight",
"height","letterSpacing","lineHeight","margin","opacity","outline","overflow","padding",
"position","src","stroke","textAlign","visibility","whiteSpace","width",
"wordBreak","wordSpacing","wordWrap","zIndex","zoom"];
var i2 = 0, len = 0; //迭代器
var newCssText = ""; //组装新的style属性内容
var l = nodes.length;
if (l < 500) { //如果内容矿长结点过多会影响性能,这里限制为500个以内结点
for (var i=0; i < l; i++) {
tempNode = nodes[i];
cssCollection = window.getComputedStyle(tempNode,null);
if ("STYLESCRIPT".indexOf(tempNode.tageName) > -1) {//remove掉style 和script结点
node.removeChild(tempNode);
} else {
for (i2=0,len=needProp.length; i2 < len; i2++) {
newCssText += needProp[i2] + ":" + cssCollection[needProp[i2]] + ";";
}
tempNode.style.cssText = newCssText;
}
}
}
return node.innerHTML;
}