本来还以为可以成功推出互推联盟 iframe 双模式的,自己网站测试成功了,最后发现别人调用是不能自适应的,只有我自己的网站可以自适应,郁闷!!!
下面引用部分是下午辛苦整理的文章,最后发现失败了,一下就泄气了,刚发布的文章不得不先改成草稿状态,回家又继续查了半天资料,发现如果要这个 iframe 跨域还能自适应高度,必须要我网站里面制作针对调用者的中间页面(详细教程)!
也就是说,只要有一个博友调用我的 iframe,我就得制作一个和他域名对应的中间页,我勒个去,搞毛线啊!
算了, 先不折腾这个东西了,就维持老样子吧!
原文:《互推联盟 iframe 推出双模式》
看到很多联盟成员建议给这个通用 iframe 模块加上公共评论功能,其实几天前玛思阁就试过了,很容易实现,只需要加入调用评论的代码即可,但是一直在犹豫这个功能会不会对调用模块的博友带来困扰呢?比如,某博友比较喜欢清爽简单的界面?
好吧, 其实这也不是问题,那玛思阁就麻烦一点,我做 2 个模板:一个带评论和文字模块的交流模式;一个仅包含成员列表和底部滚动公告的清爽模式,废话不多说了,直接上代码:
一、交流模式
带评论以及文字模块的 iframe 代码<iframe id="rightFrame" name="rightFrame" scrolling="no" src="/alliance" frameborder="0" onload="this.style.height='475px'" style="padding: 0px; width: 100%;"></iframe> <script type="text/javascript"> var browserVersion= window.navigator.userAgent.toUpperCase(); function reinitIframe(){ try{ var iframe=document.getElementById('rightFrame'); var bHeight=0; if(browserVersion.indexOf("CHROME")==-1 && browserVersion.indexOf("SAFARI")==-1) bHeight=iframe.contentWindow.document.body.scrollHeight; var dHeight=0; if(browserVersion.indexOf("FIREFOX")!=-1) dHeight=iframe.contentWindow.document.documentElement.offsetHeight + 2; else if(browserVersion.indexOf("MSIE")==-1 && browserVersion.indexOf("OPERA")==-1) dHeight=iframe.contentWindow.document.documentElement.scrollHeight; else bHeight=bHeight+3; //alert("bHeight="+bHeight+"--dHeight="+dHeight+"--"+browserVersion); var height = Math.max(bHeight, dHeight); iframe.style.height=height+"px"; }catch (ex){} } window.setInterval("reinitIframe()",200); </script>
二、清爽模式
不含评论和文字模块,但底部存在滚动公告(主要用于通知最新活动!)<iframe id="rightFrame" name="rightFrame" scrolling="no" src="/bokehutui" frameborder="0" onload="this.style.height='475px'" style="padding: 0px; width: 100%;"></iframe> <script type="text/javascript"> var browserVersion= window.navigator.userAgent.toUpperCase(); function reinitIframe(){ try{ var iframe=document.getElementById('rightFrame'); var bHeight=0; if(browserVersion.indexOf("CHROME")==-1 && browserVersion.indexOf("SAFARI")==-1) bHeight=iframe.contentWindow.document.body.scrollHeight; var dHeight=0; if(browserVersion.indexOf("FIREFOX")!=-1) dHeight=iframe.contentWindow.document.documentElement.offsetHeight + 2; else if(browserVersion.indexOf("MSIE")==-1 && browserVersion.indexOf("OPERA")==-1) dHeight=iframe.contentWindow.document.documentElement.scrollHeight; else bHeight=bHeight+3; //alert("bHeight="+bHeight+"--dHeight="+dHeight+"--"+browserVersion); var height = Math.max(bHeight, dHeight); iframe.style.height=height+"px"; }catch (ex){} } window.setInterval("reinitIframe()",200); </script>
三、使用方法
以上代码的详细使用方法=>https://zhang.ge/2073.html
不可以在iframe代码里让调用的自己修改宽高吗?
- -折腾本来就是蛋疼的事情,继续想其他办法吧。
嗯,暂时就这样滴吧~~有空再找找资料。
之前你说的那个外链百度的插件再说一下,找不到回复在哪边了
意义不大。
都是
之前我那不是挺正常的么,怎么又不行了,可以自适应啊
你忘记啦?你调用的时候已存在的评论无法显示的。。。因为评论是后置加载的,自适应失败了,才让评论没显示。。。这个自适应只能支持同一个域名,跨域名得做一个中间页面,很麻烦。。。一对一的那种。。
那实现起来太麻烦了,这样的话就是没有评论,其他也不影响
嗯,这样也行,如果都有个评论,对我的空间会造成一定负载。
或者就在自己的本地弄一个也可以用着
回头得研究下自适应,这是趋势啊,自己的站在手机下已经惨不忍睹,就是不知道怎么一回事。
确实如此,预测互联网以后应该是移动端的天下。
自适应,这是趋势
得慢慢研究、摸索
同一个域名还是很好搞定的,就是跨域名难搞定。
额/....自适应要调整不同屏幕的宽度 我的那个导航站就是因为这个问题直接全站去掉了自适应....
挺麻烦的,同一个顶级域名是没啥问题的,就是跨域自适应太麻烦了,需要建立对应的中间页面,那这个iframe就无法做到通用了,我必须给每个用户单独做中间页,那是很废柴的事情。。
感觉一直使用正常,加载也挺快的!
生活百晓堂反映,说我这个东西拖慢了网站速度。。
没关系,现在一切顺其自然哈。
嗯,期待越来越多人加入!
一定一定!