您的位置：首页 > 其它

IFrame 根据嵌入页面自动调节大小

2014-08-21 16:28 295 查看
很多人估计会遇到这样的情况，在IFrame嵌入某些页面，总会出现滚动条，那么有没方法，可以让IFrame随着嵌入页面的内容大小自动调节大小而不出现滚动条呢？答案是肯定的，经过查找，本人发现用IframeResizer脚本可以很好解决此问题，并且它是跨域名的，即使嵌入的是第三方页面，不需繁杂处理，几个步骤就可以使它自动调节宽度和高度。

1。首先下载iframe-resizer最新版本，现在是v2.5.2,地址：
https://github.com/davidjbradshaw/iframe-resizer/zipball/master
2。在放Iframe的页面，引入iframeResizer.min.js脚本，并且进入如下初始化。

<scripttype="text/javascript">

iFrameResize({
log:true,//Enableconsolelogging
enablePublicMethods:true,//Enablemethodswithiniframehostedpage

});
</script>

3。添加的Iframe,还要进行如下设置，宽度设置成百分比,scrolling设成no.

如：

<iframesrc="http://anotherdomain.com/frame.content.html"width="100%"scrolling="no"></iframe>

4。在被嵌入的页面，添加如下脚本.

<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<scriptsrc="js/iframeResizer.contentWindow.min.js"type="text/javascript"></script>

5.为兼容IE8+,还要添加如下。

<metahttp-equiv="X-UA-Compatible"content="IE=edge">


实例：
http://davidjbradshaw.com/iframe-resizer/example/
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航