<iframe> 框架中添加全屏按钮
-1
悬赏园豆：20
[已解决问题]
解决于 2023-10-30 16:44
各位大神，如果有空，请指导一个问题，我想在这一页 https://www.cnblogs.com/wanghai0666/p/9837293.html 的<iframe> 框架的右上角添加一个全屏的按钮，该如何操作呀，谢谢。
我凑合着做了一个全屏按钮，但是不能放置到 iframe 页面中，而且也难看，帮着放置到 iframe 页面中也行。我是编程小白，请说的稍微详细一些，再次谢谢。
最佳答案
0
如果iframe是同源的，可以直接获取iframe，然后在iframe中append，但是不是同源的，建议你直接动态检测Iframe对应的高度，设定对应的position，然后在当前body中append
收获园豆：20
<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 框架放大，
我是数学专业，这些内容都是自学的，一只半解，让您见笑了。
这是我的所有的代码，不是很懂，要是有空，能不能麻烦您在此基础上写几句代码，我不是很懂，但是需要这个功能，每次上课都需要这个功能，教室里没有键盘，也没有鼠标，要不也不需要这个功能了，再次感谢。
我等您回复了再结帖吧，没用结帖功能，怕现在结帖后您看不到我的回复了，谢谢。
@静雅斋数学: 我运行了一下你的代码，你直接把video-fullscreen的style中，新增一个position: absolute就可以了啊
@人间春风意: 谢谢，谢谢，我测试了，确实将按钮添加到了 iframe 页面中，但是最大化以后，找不到这个按钮了，我最想得到的是：在iframe页面最大化按钮还在这个页面中且能用，再次感谢。
