支持iframe自适应,并全屏iframe

2019独角兽企业重金招聘Python工程师标准>>>

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:

iframe resizer plugin: https://github.com/davidjbradshaw/iframe-resizer

jquery fullscreen plugin: https://github.com/kayahr/jquery-fullscreen-plugin

自已写的侦测全屏事件函数等.

过程说明：

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

        });

转载于:https://my.oschina.net/xiaohelong/blog/602398