支持iframe自适应,并全屏iframe

原创
2016/01/14 15:25
阅读数 6.3K
support iframe responsive  and fullscreen iframe(支持iframe自适应,并全屏iframe)
###################################################################
1.use jquery iframe resizer(it will autoresize iframe when content change)
and more fullscreen a iframe
2.user jquery fullscreen plugin
here ,the problem is iframe resizer set the iframe's scrolling="no",so in fullscreen,when content is more than 1 screen, there is no scroll bar.
so before you call $(iframe).fullscreen(),set iframe.scrolling="auto".

3.when exit fullscreen ,we need to set scrolling="no" ,otherwise it will continue response but ugly because of the scroll bar.
so ,we detect the fullscreen state,where exit fullscreen ,we set iframe's scrolling attribute to "no".
I write the content in iframe's container page as followes:



    /*
 * detect fullsreen state,when is no  full screen , just set the iframe.scrolling="no";
 */
function onFullscreenchange(e) {
       // Mode has changed.
       console.log("onFullscreenchange");
       /**
        * Prior to Internet Explorer 11    not implemented
        IE11    msFullscreenElement
        Microsoft Edge and beyond    fullscreenElement
        */
      if (document.webkitIsFullScreen || document.mozFullScreen ||       document.msFullscreenElement||document.fullscreenElement)
        {
            /* Run code on exit */
        }else{//exit fulscreen, set current iframe scrolling = no
            if(lastFullScreenIframe!=null && lastFullScreenIframe!=undefined)
                {
                    lastFullScreenIframe[0].scrolling="no";//no in fullscreen mode ,set scrolling no
                }
        }
    }
        jQuery(document).ready(function() {
            document.addEventListener("fullscreenchange", onFullscreenchange, false);
            document.addEventListener("webkitfullscreenchange", onFullscreenchange, false);
            document.addEventListener("mozfullscreenchange", onFullscreenchange, false);
            document.addEventListener("MSFullscreenChange", onFullscreenchange, false);//ie 11
        });


have fun ,any problem mail me  xiaohelong2005@gmail.com
########################################################################
the follow is in chinese:
自已写的侦测全屏事件函数等.
过程说明:
1.按iframe resizer方式实现好。(需要注意的是,每新增一个iframe,需要调用一次初始化函数)
2.按jquery fullpage方式实现好iframe全屏(获取到该iframe对像,调用fullpage)

3.此时虽然已经能在非全屏模式正常工作,但是在全屏方式,内容较多时确并不会出现滚动条。
解决如下:
在$(iframe).fullpage()调用前,设定iframe.scrolling="auto",并用lastFullScreenIframe记下最近一个iframe(多tab情况下)
解决了全屏模式下的滚动条问题,但是在非全屏下我们又必须将scrolling="no"关闭。解决思路如下:
监测全屏事件,当退出全屏时设定iframe.scrolling="no".
在iframe的父亲框架中,加入以下功能:

/*
 * detect fullsreen state,when is no  full screen , just set the iframe.scrolling="no";
 */
function onFullscreenchange(e) {
       // Mode has changed.
       console.log("onFullscreenchange");
       /**
        * Prior to Internet Explorer 11    not implemented
        IE11    msFullscreenElement
        Microsoft Edge and beyond    fullscreenElement
        */
      if (document.webkitIsFullScreen || document.mozFullScreen ||       document.msFullscreenElement||document.fullscreenElement)
        {
            /* Run code on exit */
        }else{//exit fulscreen, set current iframe scrolling = no
            if(lastFullScreenIframe!=null && lastFullScreenIframe!=undefined)
                {
                    lastFullScreenIframe[0].scrolling="no";//no in fullscreen mode ,set scrolling no
                }
        }
    }
        jQuery(document).ready(function() {
            document.addEventListener("fullscreenchange", onFullscreenchange, false);
            document.addEventListener("webkitfullscreenchange", onFullscreenchange, false);
            document.addEventListener("mozfullscreenchange", onFullscreenchange, false);
            document.addEventListener("MSFullscreenChange", onFullscreenchange, false);//ie 11
        });

展开阅读全文
打赏
1
5 收藏
分享
加载中
更多评论
打赏
0 评论
5 收藏
1
分享
返回顶部
顶部