父窗口点击一个图片（或图标），用iframe链接到其他地址，并且在父级窗口全屏展示

本文链接：https://blog.youkuaiyun.com/zhangshab/article/details/80332798

本文介绍了如何在HTML页面中，通过点击图片或图标使iframe全屏显示，并在全屏模式下加载其他URL内容。重点讨论了全屏API的使用、iframe的交互以及浏览器的安全机制，包括esc键监听的限制。文中提供了相关参考资料和完整代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

知识点：

注意：当窗口全屏，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结构：

效果图：略