【发布时间】：2012-04-06 06:30:47
【问题描述】：
在their goodies page 上展示的pinterest 网站“固定”按钮的设计要求网页设计师在他们的网页中插入一个特别标记的锚标记。然后页面必须调用pinit.js boilerplate。
特殊的锚标记必须是这样的：
<a href="http://pinterest.com/pin/create/button/?
url=http%3A%2F%2Fpage%2Furl
&media=http%3A%2F%2Fimage%2Furl"
class="pin-it-button" count-layout="horizontal"></a>
并且 pinit.js 样板必须看起来像这样，并且必须放在 最后一个 pin 之后。
<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js">
</script>
据我所知，pinit.js 代码的作用是这样的：
- 扫描页面寻找锚标签
- 查找特殊标记，特别是“pin-it-button”类和 href 前缀
- 用重新格式化的 IFRAME 替换锚标记。这些 iframe 的
src属性获取规范化的 URL，这些 URL 指向一个不同的服务器，而不是 pinterest.com，而是 pinterest 使用的 CDN 中的一个服务器。
这在静态网页上很好，但是：
- 它不适用于动态页面，其中“固定”按钮可能通过 jquery 逻辑动态生成并注入页面标记以响应用户操作。
- 每个“pin it”按钮需要一个 iframe，这意味着每个“pin it”按钮需要一个 HTTP GET。如果你有 10 张照片，每张都有一个 pinit 按钮，那么就有 10 个 HTTP GET 到 pinterest 的 CDN。所有这些 GET 都用于名称相似的资源，但根据要固定的图像的 url，它们都略有不同，因此无法缓存。
我想做的是消除过多的 GET。有任何想法吗？
我的一个想法是：
- 在样式为
display:none;的 div 中准确插入一个锚标记。 - 调用 pinit.js，这会神奇地替换该锚标记，并加载新的 iframe。它是不可见的，因为它仍然驻留在不可见的 div 中。
- 运行一些额外的 JS 逻辑来检查生成的 iframe 的 src 属性上的 URL，保存 pinterest CDN 的主机名。
- ?
然后我可以为 pinterest CDN 生成“规范化”URL，但是...如果我只是将它们用作 iframe 的 src我的逻辑生成，那么我也会遇到同样的问题获取。我所做的只是消除了对 pinit.js 的连续调用（无论如何都是可缓存的）。
有人遇到过这种情况吗？
我必须相信这种设计会发生变化——它似乎无法像现在这样对 pinterest 进行扩展。
编辑
我读到elsewhere 说 pinterest 为页面上的“固定”按钮提供了“异步”机制，适用于有很多“固定”按钮的情况。不知道那是什么；我找不到它。
【问题讨论】：
标签： javascript jquery iframe pinterest