Hexo -21- iframe 增加全屏显示按钮

为为为什么

发布于 2022-08-04 13:43:56

1.2K0

发布于 2022-08-04 13:43:56

文章被收录于专栏：又见苍岚

在 Hexo 网页中经常会用到 iframe 模块插入想要显示的内容，由于主题限制，内容只能在博客内容区显示。本文记录为iframe 增加全屏按钮的方法。

方案思路

确定 iframe 块的 id
使用 JavaScript 控制该 id 的全屏行为
设置按钮控制开关

解决方案

js 代码

<script>
	/**
     * 进入全屏
     * @param element
     */
    function requestFullScreen(element) {
        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}");
            }
        }
    }


    /**
     * 退出全屏
     */
    function exitFullscreen() {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        }
    }
    
    document.getElementById('goAmpl').onclick = function () {
        let iframe = document.getElementById("iframe-one");
        requestFullScreen(iframe);
    }
    document.getElementById('outAmpl').onclick = function () {
        let iframe = document.getElementById("iframe-one");
        exitFullscreen(iframe);
    }

</script>

此时 js 已经 ready，需要按钮控制以及 id 绑定
示例代码（以node PPT为例）

<iframe id="iframe-one" name="iframe-one" src="/nodeppt/demo/index.html" width="100%" height="500" scrolling="no" frameborder="0"></iframe>
<button id="goAmpl">全屏显示</button>