返回列表 回复 发帖

将评论整合到词条页面(已有成功案例)

本帖最后由 爱财道 于 2009-11-7 17:45 编辑

词条评论为独立页面,用户如果查看或发表评论必须打开新的页面,用户体验很不好!那如何解决呢?财道百科现在实现了这个功能,而且是在viewdoc.htm词条页自适应状况。
效果案例参见:http://wiki.icaidao.com/index.php?doc-view-1071.html
http://wiki.icaidao.com/index.php?doc-view-2261.html

长度随评论文章而定。
图片样式见:

整合步骤:
一:新建一个 iframefit.js 复制如下代码到iframefit.js:
function iframeAutoFit()
{
try
{
if(window!=parent)
{
var a = parent.document.getElementsByTagName("IFRAME");
for(var i=0; i<a.length; i++) //author:meizz
{
if(a.contentWindow==window)
{
var h1=0, h2=0, d=document, dd=d.documentElement;
a.parentNode.style.height = a.offsetHeight +"px";
a.style.height = "10px";
if(dd && dd.scrollHeight) h1=dd.scrollHeight;
if(d.body) h2=d.body.scrollHeight;
var h=Math.max(h1, h2);
if(document.all){h += 4;}
if(window.opera){h += 1;}
a.style.height = a.parentNode.style.height = h +"px";
}
}
}
}
catch (ex){}
}
if(window.attachEvent)
{
window.attachEvent("onload", iframeAutoFit);
}
else if(window.addEventListener)
{
window.addEventListener('load', iframeAutoFit, false);
}

二:将iframefit.js 上传到空间 /js/文件夹下
财道百科:http://wiki.icaidao.com-第一财经百科全书
本帖最后由 爱财道 于 2009-11-7 17:54 编辑

步骤三:将 <script src="/js/iframefit.js" type="text/javascript" ></script>  放到viewcomment.htm 的<head> </head>中。

步骤四(viewdoc.htm中调用评论页面):
将如下代码放到viewdoc.htm页面你要放的位置:
<iframe src="{$setting['seo_prefix']}comment-view-{$doc['did']}{$setting['seo_suffix']}#cmt" frameBorder="0" scrolling="no" width="630px;"></iframe>
注意width需根据放置位置自行调整。
财道百科:http://wiki.icaidao.com-第一财经百科全书
如采用此方法,viewcomment.htm 页面需去掉头部和尾部相应代码,如此在viewdoc.htm中才会只显示出评论词条名称和评论内容!

此方法有爱财道提供,财道提示采用此方法前请先做好相应备份!
当然,您也可以去看看财道百科如何做到的:http://wiki.icaidao.com
财道百科:http://wiki.icaidao.com-第一财经百科全书
以前采用过一个兄弟的iframe做法,也采用了段时间,但总无法自适应,而且在升级到4.5的版本后效果更差!
还但到一个技术高手真的自己编码就将评论弄到了viewdoc.htm中,实在佩服,可惜技术活咱有点吃力!
嘿嘿,看看案例吧,各位兄弟不妨一试,效果是不是比原来的hdwiki自带的评论效果好多了。。。
财道百科:http://wiki.icaidao.com-第一财经百科全书
。疯了吧,搞这么麻烦
  1. <div class="main l cmtzone">
  2. <iframe id="frame_content" src="{url comment-view-$doc['did']}" width="725" scrolling="no" frameborder="0" onload="this.height=100"></iframe>
  3.     <script type="text/javascript">
  4.     function reinitIframe(){
  5.     var iframe = document.getElementById("frame_content");
  6.     try{
  7.     var bHeight = iframe.contentWindow.document.body.scrollHeight;
  8.     var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
  9.     var height = Math.max(bHeight, dHeight);
  10.     iframe.height =  height;
  11.     }catch (ex){}
  12.     }
  13.     window.setInterval("reinitIframe()", 200);
  14.     </script>
  15. </div>
复制代码
完美自适应。。就这么简单
5# veras

楼上的代码是需要放在什么地方的?
请明示!
6# jimix

参考1 2 3 4楼
返回列表