html中iframe全屏显示,支持iframe自适应,并全屏iframe_html/css_WEB-ITnose

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

});

本条技术文章来源于互联网，如果无意侵犯您的权益请点击此处反馈版权投诉

本文系统来源：php中文网