手Q一般化分享

今天在做一个需求，一般从客户端里分享出来的内容到QQ或者微信之类的地方都是设置好分享的图片、标题和内容的。

但是如果用户再次分享的话，看到分享链接样子就不是一开始分享的样子了，手机QQ会自动从页面中读取内容，通常是第一个h*标签(h1~h5)，加上第一个img和p标签。

那么如果希望用户看到的分享链接的样子和页面里面实际上的样子不太一样或者话语不同的话，那么通常就需要事先写好内容，或者服务器动态生成内容，然后将内容隐藏起来。

在实际操作中，我发现有几个点需要注意：

  1. 隐藏的内容不会被预先读取出来
    如果用display:none的方式，不论是行内、页面内、还是外部样式表，都不会被预先读取。
    同时，将font-size设置为0也是无效的。
    通过使用
    1
    2
    3
    .share {
        text-indent:-999px
    }

的方式，可以将文字推出页面，但是这样页面原本有文字的部分依然会存在占位，所以还需要加上

1
2
3
4
.share {
    text-indent:-999px;
    position:absolut;
}

让文字部分脱离文档流。

  1. 对于图片可以一开始就使用position:absolute的方式，像这样：

    1
    2
    3
    4
    5
    .share-img {
        position:absolute;
        top:-999px;
        left:-999px
    }

  2. 对于分享链接的预读取是有缓存的，多久不清楚，所以调试的时候需要在链接后面加上?a=12312随机的东西让其认为是不同的页面。