这段时间倒腾的东西需要和微博有大量的互动,所以使用了微博的展示框以及评论箱。微博在这方面处理的不是很好,均是提供了iframe的方式。
在移动端我并不希望加载这样的iframe页面,@media + display:none无法避免资源被加载,只是被隐藏而已。不谈及性能,光在流量损耗上对于访问者来说都是不友好的。
最终我想到一个办法来处理展示框,由于本身已经引用了JQuery,所以直接用了下面的代码:
if($(window).width() > 1260) {
$("#sidebar").html("<iframe width='100%' height='612' class='share_self' frameborder='0' scrolling='no' src='//xxxxxxxx'></iframe>");
};
查询窗体宽度后,填入iframe内容,可以避免手机端的加载。但是这样的办法无法应用于评论箱,不知道从何下手。
微博提供的是这样的一段代码:
<script>
(function(){
var url = "//xxxxxxxxxxxxxx.com";
url = url.replace("url=auto", "url=" + encodeURIComponent(document.URL));
document.write('<iframe id="WBCommentFrame" src="' + url + '" scrolling="no" frameborder="0" style="width:100%"></iframe>');
})();
</script>
<script src="//tjs.sjs.sinajs.cn/open/widget/js/widget/comment.js"></script>
<script>
window.WBComment.init({
"id": "WBCommentFrame"
});
</script>
希望这段代码能够在1260以上的宽度才会被加载,而不是被隐藏。
先行感谢!
可以试一下,不知道有没有用。