支持iframe自适应,并全屏iframe_html/css_WEB-ITnose
- WBOY原創
- 2016-06-21 08:59:521953瀏覽
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
});