HTML/DOM用于包含随机图像的页面，该页面将在facebook和google+中正常发布
HTML/DOM用于包含随机图像的页面，该页面将在facebook和google+中正常发布
提问于 2012-05-17 00:10:48
我有一个网站，其中包含一个随机头部照片的可爱自负。每次加载页面(或单击头像)时，它都会被替换为新的头像。它工作得很好，直到我在Facebook上发布了一个网站的链接。
然后发生的事情是，当Facebook扫描页面上的图片时，它没有找到随机的图片，我猜是因为它没有运行脚本。我喜欢facebook的缩略图也有一个随机的图像。
有没有办法在不借助服务器端代码的情况下解决这个问题？
下面是我现在要做的：
在head-script部分
var lastTimeout = 0;
var lastHeadNum = 0;
function headURL(headCount)
{
url = "/public/images/heads/mtoy";
if( headCount < 10 )
url += "0";
url += headCount.toString();
url += ".gif";
return url;
}
function headshotImage()
{
lastHeadNum = Math.floor((Math.random()*87)+1);
document.write('<img id="headshot" src="' + headURL(lastHeadNum) + '" onclick="next_headshot();" width=150 height=150>\n');
lastTimeout = setTimeout("next_headshot();", 12000);
}
function next_headshot()
{
if (lastTimeout != 0)
clearTimeout(lastTimeout);
do {
headNum = Math.floor((Math.random()*87)+1);
} while (headNum == lastHeadNum);
lastHeadNum = headNum;
document.getElementById('headshot').src = headURL(headNum);;
lastTimeout = setTimeout("next_headshot();", 12000);
}然后在正文中-html
<div id="contents">
<script type="text/javascript">headshotImage();</script>
<H1 class="contenthead">Table of Contents</H1>在之前的版本中，body-html看起来像这样：
<div id="contents">
<img id="headshot" src="" onclick="next_headshot();">
<H1 class="contenthead">Table of Contents</H1>然后我有一个body.onload处理程序，在第一次调用next_headshot的时候，Facebook也遇到了同样的问题。
回答 1
Stack Overflow用户
回答已采纳
发布于 2012-05-17 00:43:07
如果你真的希望Facebook有一个随机的图片，那么我认为你需要服务器端的代码。但是如果你对一个固定的图像感到满意，那就看看OpenGraph吧。您应该能够将以下内容放入您的<head>部分：
<meta property="og:image" content="/public/images/heads/mtoy01.gif"/>另一种方法是将<img>标记直接放到HTML中(而不是过程化地生成它)，并将其硬编码到一个图像中。它不会给您提供最初随机的图像，尽管您可能会在页面加载时立即将其交换出来。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10622457
复制相关文章
相似问题
腾讯云开发者
