当前位置:Gxlcms > html代码 > 支持iframe自适应,并全屏iframe_html/css_WEB-ITnose

支持iframe自适应,并全屏iframe_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:261人阅读

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

});

人气教程排行