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

本文介绍了如何在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结构:

效果图:略


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值