首页 新闻 会员 周边

<iframe> 框架中添加全屏按钮

-1
悬赏园豆:20 [已解决问题] 解决于 2023-10-30 16:44

各位大神,如果有空,请指导一个问题,我想在这一页 https://www.cnblogs.com/wanghai0666/p/9837293.html 的<iframe> 框架的右上角添加一个全屏的按钮,该如何操作呀,谢谢。
我凑合着做了一个全屏按钮,但是不能放置到 iframe 页面中,而且也难看,帮着放置到 iframe 页面中也行。我是编程小白,请说的稍微详细一些,再次谢谢。

静雅斋数学的主页 静雅斋数学 | 菜鸟二级 | 园豆:399
提问于:2023-10-29 08:08
< >
分享
最佳答案
0

如果iframe是同源的,可以直接获取iframe,然后在iframe中append,但是不是同源的,建议你直接动态检测Iframe对应的高度,设定对应的position,然后在当前body中append

收获园豆:20
人间春风意 | 老鸟四级 |园豆:2578 | 2023-10-30 09:50

<div style="margin-left:85%;" title="点击后全屏显示,效果最佳; 若要退出全屏请使用Esc键"> <button id="video-fullscreen" style="background-color: #4CAF50;border: none; display:inline-block; color: white;padding: 8px 18px;text-align: center;text-decoration: none; display:inline-block; font-size: 16px;margin: 4px 2px; z-index:999;">[全屏/Esc]</button></div>
<iframe allowfullscreen="true" id="LTTP" width="96%" onload='this.height=document.getElementById("LTTP").scrollWidth*0.60+"px"' frameborder="0" src='https://wanghai0666.github.io/docsify-CnBlogs/#/?id=docsify-CnBlogs' style="border: 1px solid #ccc"></iframe>
<script src="https://blog-static.cnblogs.com/files/wanghai0666/base.js"></script>
对上述代码的说明:
第一段是个按钮,不大会弄,很粗糙;
第二段是个iframe 框架,
第三段js文件,是给按钮添加功能,让iframe 框架放大,
我是数学专业,这些内容都是自学的,一只半解,让您见笑了。
这是我的所有的代码,不是很懂,要是有空,能不能麻烦您在此基础上写几句代码,我不是很懂,但是需要这个功能,每次上课都需要这个功能,教室里没有键盘,也没有鼠标,要不也不需要这个功能了,再次感谢。
我等您回复了再结帖吧,没用结帖功能,怕现在结帖后您看不到我的回复了,谢谢。

静雅斋数学 | 园豆:399 (菜鸟二级) | 2023-10-30 12:00

@静雅斋数学: 我运行了一下你的代码,你直接把video-fullscreen的style中,新增一个position: absolute就可以了啊

人间春风意 | 园豆:2578 (老鸟四级) | 2023-10-30 15:35

@人间春风意: 谢谢,谢谢,我测试了,确实将按钮添加到了 iframe 页面中,但是最大化以后,找不到这个按钮了,我最想得到的是:在iframe页面最大化按钮还在这个页面中且能用,再次感谢。

静雅斋数学 | 园豆:399 (菜鸟二级) | 2023-10-30 16:39
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册