1、首先你要明确:选择条数之后,触发了事件令子页面的body高度改变了,因此我们要捕捉到这个事件,即:$("body").resize(function(){});
2、捕捉到事件后,我们要利用window.parent改变父页面的容器的高度。如:在父页面写个方法
function changeHeight(height){/改变装iframe的容器div的高度}
然后在子页面的resize方法里调用:
window.parent.changeHeight(height); /height为body的高度
3、疑问:body没有resize事件。没关系,把下面这段代码引入子页面就有了(先要引用jquery)。
(function($,h,c){var a=$([]),e=$.resize=$.extend($.resize,{}),i,k="setTimeout",j="resize",d=j+"-special-event",b="delay",f="throttleWindow";e[b]=250;e[f]=true;$.event.special[j]={setup:function(){if(!e[f]&&this[k]){return false}var l=$(this);a=a.add(l);$.data(this,d,{w:l.width(),h:l.height()});if(a.length===1){g()}},teardown:function(){if(!e[f]&&this[k]){return false}var l=$(this);a=a.not(l);l.removeData(d);if(!a.length){clearTimeout(i)}},add:function(l){if(!e[f]&&this[k]){return false}var n;function m(s,o,p){var q=$(this),r=$.data(this,d);r.w=o!==c?o:q.width();r.h=p!==c?p:q.height();n.apply(this,arguments)}if($.isFunction(l)){n=l;return m}else{n=l.handler;l.handler=m}}};function g(){i=h[k](function(){a.each(function(){var n=$(this),m=n.width(),l=n.height(),o=$.data(this,d);if(m!==o.w||l!==o.h){n.trigger(j,[o.w=m,o.h=l])}});g()},e[b])}})(jQuery,this);
我这样写够清楚了么? 收起
2、捕捉到事件后,我们要利用window.parent改变父页面的容器的高度。如:在父页面写个方法
function changeHeight(height){/改变装iframe的容器div的高度}
然后在子页面的resize方法里调用:
window.parent.changeHeight(height); /height为body的高度
3、疑问:body没有resize事件。没关系,把下面这段代码引入子页面就有了(先要引用jquery)。
(function($,h,c){var a=$([]),e=$.resize=$.extend($.resize,{}),i,k="setTimeout",j="resize",d=j+"-special-event",b="delay",f="throttleWindow";e[b]=250;e[f]=true;$.event.special[j]={setup:function(){if(!e[f]&&this[k]){return false}var l=$(this);a=a.add(l);$.data(this,d,{w:l.width(),h:l.height()});if(a.length===1){g()}},teardown:function(){if(!e[f]&&this[k]){return false}var l=$(this);a=a.not(l);l.removeData(d);if(!a.length){clearTimeout(i)}},add:function(l){if(!e[f]&&this[k]){return false}var n;function m(s,o,p){var q=$(this),r=$.data(this,d);r.w=o!==c?o:q.width();r.h=p!==c?p:q.height();n.apply(this,arguments)}if($.isFunction(l)){n=l;return m}else{n=l.handler;l.handler=m}}};function g(){i=h[k](function(){a.each(function(){var n=$(this),m=n.width(),l=n.height(),o=$.data(this,d);if(m!==o.w||l!==o.h){n.trigger(j,[o.w=m,o.h=l])}});g()},e[b])}})(jQuery,this);
我这样写够清楚了么? 收起
追问:
你这个谷歌浏览器支持吗?
追答:
必须支持啊,我最喜欢chrome浏览器了。
追问:
你那些方法怎么加,加在哪里。 function changeHeight(height){/改变装iframe的容器div的高度} 然后在子页面的resize方法里调用: window.parent.changeHeight(height); 这些怎么弄? 可以写个小小的demo吗,谢谢,急需
追答:
都说这么清楚了。。。。 1、因为装iframe的div在父页面,所以在父页面写个changeHeight方法,做改变div高度的处理。 2、要捕捉resize事件,所以在子页面绑定resize事件,并在resize事件的回调函数中调用父页面的changeHeight方法,根据子页面body的高度改变父页面div容器的高度。
追问:
我弄不来啊,完全没有思路 changeHeight()我都不知道写什么,你可以帮我弄个demo吗?有重谢
追答:
下面是我写的,先要引入jquery和我上面发的那段代码喔。 父页面: function changeWid(hei){ $(".rightCon").css("height",hei); //rightCon为包iframe的div; } 子页面: $(function(){ var height = $(document.body).height()+50; window.parent.changeWid(height); $("body").resize(function() { var height = $(document.body).height()+50; window.parent.changeWid(height); }); });
追问:
我发一个小小的东西给你你帮我写一下嘛。很简单的。你一看就明了的代码。谢谢。这个困惑我好久了,非常想知道怎么解决
追答:
最近比较忙,没时间哇。 你找个懂js的,让他看下我写的就明白了,就能帮你解决了。
追问:
你有时间就帮帮我嘛,我的那个demo很简单的,就是跳转页面而已,主要是想实现自适应的功能
追答:
没时间哇自己多学学基础,动动脑筋。而且我这有网络限制的,qq啥的都登不了,你那demo到不了我这。