知识点:
注意:当窗口全屏,keyup,keydown类似事件是监听不到esc按键的,这是浏览器一个安全机制。如果不是全屏模式还是可以监听到的。
全屏的操作:
借鉴文档:
https://blog.youkuaiyun.com/k358971707/article/details/60465689
https://www.cnblogs.com/zhangwei595806165/p/4844551.html
http://www.zhangxinxu.com/wordpress/2012/10/html5-full-screen-api-firefox-chrome-difference/
https://blog.youkuaiyun.com/tywali/article/details/8623938
https://segmentfault.com/q/1010000009988182
https://www.cnblogs.com/minghui007/p/5601194.html
https://blog.youkuaiyun.com/tywali/article/details/8623938
获取iframe中document对象和window:
借鉴文档:
https://blog.youkuaiyun.com/theforever/article/details/6126635
https://blog.youkuaiyun.com/wangjun5159/article/details/78647615
http://caibaojian.com/js-get-iframe.html
jquery重定向:
https://blog.youkuaiyun.com/zhouranlovesmile/article/details/68936984
以上是借鉴的资料:
需求描述:
在a.html页面,嵌入一个iframe. 在a.html中点击一个图标,让iframe全屏展示,并且iframe展示其他页面的内容
我的思路:
添加iframe为了让窗口全屏时展示其他页面的内容,这里我的思路是让iframe全屏展示

让iframe全屏展示的方法(该方法调用的事h5新出的api涉及到兼容性问题)
其中bindIframeKeyup是我自己加的方法,是多余的,对你们来讲没啥用
我是点击img触发iframe大屏操作:
当iframe大屏以后需要对iframe中的内容进行操作,要清楚iframe中世纪装的是一个完整的html页面。它有自己的document,window对象
iframe大屏时,浏览器不允许 键盘事件 监听esc键,所以我用了
requestFullscreen事件
这个事件的触发条件是当iframe满屏或退出满屏之间切换时都会触发该事件(换句话哪个元素满屏,就把哪个元素绑定到该事件上)
全部代码:
$(function () {
//渲染iframe元素 -- 用于大屏弹出
var renderIframe = function () {
var iframe = $('<iframe id ="iframe_con"' +
'src="/bigScreen/_minBig/main_page" style="display: none;" width="100%" height="100%" frameborder="no" border="0" ' +
'marginwidth="0" marginheight="0" scrolling="no" allowtransparency="yes"></iframe>');
$('#bigDetail_main').append(iframe);
}
//渲染图片
var drawHtmlPic = function () {
var data = [{
title:'北京',
name: '北京',
imgSrc: '/public/img/asset/beijing.png'
},{
title:'广东',
name: '广东',
imgSrc: '/public/img/asset/guangdong.png'
},{
title:'河南',
name: '河南',
imgSrc: '/public/img/asset/henan.png'
},{
title:'贵州',
name: '贵州',
imgSrc: '/public/img/asset/guizhou.png'
},{
title:'广西',
name: '广东',
imgSrc: '/public/img/asset/guangdong.png'
},{
title:'湖南',
name: '河南',
imgSrc: '/public/img/asset/henan.png'
},{
title:'湖北',
name: '贵州',
imgSrc: '/public/img/asset/guizhou.png'
}]
var ulCon = $('<ul></ul>');
for(var i=0 ;i<data.length;i++){
var htmlPic ='<li class="item_container">' +
'<div>' +
'<img data-name="'+ data[i].name +'" src="'+ data[i].imgSrc +'"/>'+
'</div>'+
'<span>'+ data[i].title +'</span>' +
'</li>'
ulCon.append(htmlPic);
}
$('#bigDetail_main').append(ulCon);
};
//ifame全屏设置
var requestFullScreen = function(_obj) {
var element = document.getElementById("iframe_con");
var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
if (requestMethod) {
requestMethod.call(element);
} else if (typeof window.ActiveXObject !== "undefined") {
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
$(element).show();
bindIframeKeyup(_obj);
}
//img绑定事件
var bindClickEventToimg = function () {
$('img').each(function (index,item) {
$(item).on('click',function () {
requestFullScreen($(item));
})
})
}
//按esc键让iframe隐藏
var bindIframeKeyup = function (_obj) {
var displayCount = 0;
var element = document.getElementById("iframe_con");
/*if (element.requestFullscreen) {
element.addEventListener("fullscreenchange", function () {
if (element.fullscreenElement != null) {
console.info("Went full screen");
} else {
console.info("Exited full screen");
}
});
}
else if (element.msRequestFullscreen) {
element.addEventListener("MSFullscreenChange", function () {
if (element.msFullscreenElement != null) {
console.info("Went full screen");
} else {
console.info("Exited full screen");
}
});
}else if(element.webkitRequestFullScreen){
childDom.addEventListener("fullscreenchange", function () {
if (childDom.webkitFullscreenElement != null) {
alert("Went full screen");
} else {
alert("Exited full screen");
}
});
}*/
if(element.webkitRequestFullScreen){
element.addEventListener("webkitfullscreenchange", function(e) {
displayCount = displayCount + 1;
if(displayCount == 2){
$(element).hide();
$(window).attr('location', '/bigScreen/_minBigDetail/');
}else{
var timeout = null;
$(element.contentWindow).attr('location','/bigScreen/_minBig/main_page');
clearTimeout(timeout);
timeout = setTimeout(function () {
var childDom = element.contentDocument;
//大屏时让对应的左树隐藏
var classCfg = {
width: '100%',
left: '0px'
}
$(childDom.getElementById('sidebar')).hide();
$(childDom.getElementById('content')).css(classCfg);
$(childDom.getElementById('wordMap')).detail({
name:_obj.attr('data-name')
});
},650);
}
});
}
}
renderIframe();
drawHtmlPic();
bindClickEventToimg();
});
css样式:
#content .bigDetailContainer {
height: calc(100% - 20px);
padding-top: 0;
border: none;
}
#content .bigDetailContainer ul {
overflow: hidden;
height: 100%;
}
#content .bigDetailContainer .item_container {
float: left;
}
#content .bigDetailContainer .item_container {
width: 22%;
height: 33%;
min-height: 145px;
margin-right: 40px;
margin-top: 40px;
box-sizing: border-box;
background: rgba(255, 255, 255, 0.03);
}
#content .bigDetailContainer .item_container div {
width: 100%;
height: calc(100% - 40px);
box-sizing: border-box;
text-align: center;
}
#content .bigDetailContainer .item_container div img {
height: 80%;
width: 80%;
margin-top: 35px;
cursor: pointer;
}
#content .bigDetailContainer .item_container span {
display: block;
text-align: center;
font-size: 18px;
line-height: 39px;
}
#content .bigDetailContainer .item_container:hover {
border: 2px solid;
border-image: linear-gradient(to right, #8A00FF, #4189F6) 30 30;
}
html结构:
效果图:略