逆天了,文章中增加页内评论功能(更新取消滚动条的方法)

晕了,真是个逆天的功能,效果请进入全文看我的文章底部

国内很多Blog都能够在直接文章底部编写评论。在旧版的Blogger中,通过修改也可以达到该目的。但新版Beta,我用google一直搜索不到修改的方法。之前曾想过使用widget,但昨晚的试验否决了这个想法,因为每篇文章就是一个widget,widget间不能嵌套。而无意中看了一篇frame的文章,摸索一番,居然成功达到目的了!

我的原理很简单,每篇文章都对应一个评论页面,于是就在文章的footer中使用iframe嵌套该页面。本方法在IE6.0和FireFox 1.5中成功显示


找到以下代码

<P class='comment-footer'>
<A expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>Post a Comment</A>
</P>


用以下代码替换

<P class='comment-footer'>
<iframe expr:src='data:post.addCommentUrl' frameborder='0' height='100%' margin='0' width='100%' scrolling='no'/>
</P>

即可实现效果。避免重复显示评论,所以文章底部本身也显示评论的功能删掉

找到以下代码,就在iframe上面

<DIV id='comments'>
<A name='comments'/>
<H4>
<b:if cond='data:post.numComments == 1'>
1 Comment:
<b:else/>
<data:post.numComments/> Comments:
</b:if>
</H4>

<DL id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<DT class='comment-author' expr:id='"comment-" + data:comment.id'>
<A expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<A expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></A>
<b:else/>
<data:comment.author/>
</b:if>
said...
</DT>
<DD class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<SPAN class='deleted-comment'><data:comment.body/></SPAN>
<b:else/>
<P><data:comment.body/></P>
</b:if>
</DD>
<DD class='comment-footer'>
<SPAN class='comment-timestamp'>
<A expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</A>
<b:include data='comment' name='commentDeleteIcon'/>
</SPAN>

</DD>
</b:loop>
</DL>


将这些代码都删掉,还有在ifame下面,</b:includable>之前的一个</DIV>也删掉。

UPADTE:
发现问题了,如果你之前没登陆过blogger,是无法在留言栏里直接登陆留言的,会提示账户不对。可以选other,不过那就不能显示你的头像了

第二个问题如果在setting中选择在popup窗口中留言,那么在firefox1.5载入文章后又会自动跳转到单独的留言窗口好吧,其实无论你怎么设置firefox都会自动跳。。。。

UPADTE2:
更新取消滚动条的方法,在iframe中添加scrolling='no'就可以了,但这样FF就不能正常显示了

现在我使用YY的方法
CSS
.yy{border:0px;height:300px;margin:0px;width:100%;overflow-y:auto;}
*:first-child+html .yy{overflow-y:hidden;height:100%;} * html .yy{overflow-y:hidden;height:100%;}

<iframe expr:src='data:post.addCommentUrl' class='yy' frameborder='0' /&glt;

虽然还有滚动条,但兼容了FF

12 条评论:

发表评论

说...

很厉害啊

guostone 说...

哇,你这个方法好啊,已经收藏了,好不容易才找到这个方法啊,不错.

8O 说...

nice job,能不能将滚动条取消?

Dexter.Yy 说...

啊啊啊啊,不好意思弄错了……我这样写CSS本来的目的是让框架在IE里隐藏滚动条,在FIREFOX里显示滚动条……

不过我搞错了,在IFRAME的样式里加overflow:hidden;并不能隐藏滚动条,必须加到框架页面的BODY里……

所以这个想法不能实现……除非用JS……

你这个BLOG应该已经链接过一些JS文件,你看看里面有没有这样一段:window.onload=function(){}
如果有的话,在{}里面加入:

if(window.ActiveXObject){
document.getElementById("commentiframe").scrolling="no";
}else{
document.getElementById("commentiframe").scrolling="";
}

如果没有的话,直接在JS文件里加入:

window.onload=function(){

if(window.ActiveXObject){
document.getElementById("commentiframe").scrolling="no";
}else{
document.getElementById("commentiframe").scrolling="";
}

}

iframe标签里加上 id="commentiframe"和scrolling="no"

这样应该就能够实现兼容FIREFOX浏览器,并且在IE里隐藏滚动条

hvl 说...

iframe的方法啊。。。

Shalafi Vos 说...

YY,似乎还是不行啊,现在我的blog就是用你的方法。虽然在FF下iframe已经变大了,但IE下,没有了滚动条就看不到下面的评论,可以让height自适应高度吗

说...

sadfsadsdf1111111111111

Liu Yang 说...

我试试看

说...

美容
美容手册
护肤养颜
护肤心得
美肤法宝
美丽肌肤
毛孔粗大
祛痘祛印
控油净脂
去角质
保湿
防晒
抗皱
祛斑
眼袋
美白
面膜
彩妆天地
化妆技巧
化妆用品
时尚妆容
靓丽彩妆
粉底
睫毛
描眉
眼妆
腮红
美甲
卸妆
补妆
秀发一族
秀发DIY
时尚发型
美发护发
美发用品
医学美容
疾病与美容
专家提醒
整形美容
中医美容
饮食美容
香氛迷情
香氛物语
香水品牌
整形美容
整形知识
整形新闻
五官整形
口唇整形
眼眉整形
颧骨整形
鼻部整形
耳部整形
颌面整形
牙部整形
乳房整形
变性手术
女性性器官整形
男性性器官整形
美体瘦身
瘦身快报
减肥常识
认识肥胖
肥胖危害
肥胖原因
肥胖预防
减肥方法
瘦身饮食
运动减肥
中医减肥
吸脂减肥
药物减肥
其它减肥方法
局部瘦身
面部瘦身
四肢瘦身
纤纤细腰
性感翘臀
腹背健美
明星瘦身
塑身美体
丰胸美容
丰胸
保湿
美白
防晒
抗皱
控油
除痘
祛斑
职场风云
职场传真
职场攻略
薪资行情
职业装扮
心语故事
流行风尚
时尚看点
服饰潮流
时尚饰品
香水广场

说...

wow gold site: wow goldwow goldwow gold

说...

中文网站推荐: 上海搬场公司上海搬场公司上海搬场上海公兴搬家上海大众搬家上海公兴搬场上海搬家上海公兴搬场上海大众搬场。其他网站:除湿机松木家具玻璃瓶

说...

wow gold site: cheapest wow golddcheapest wow goldcheapest wow gold! 中文网站推荐: 上海汽车租赁上海搬场公兴搬场公司公兴搬家除湿机玻璃瓶上海大众搬场公司调节阀除湿机