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

本文最后更新于:2022年7月18日 上午

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

方案思路

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

解决方案

  • js 代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<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为例)
1
2
<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>

显示效果

参考资料


Hexo -21- iframe 增加全屏显示按钮
https://www.zywvvd.com/notes/hexo/website/21-iframe-fullscreen/iframe-fullscreen/
作者
Yiwei Zhang
发布于
2021年9月9日
许可协议