vue框架中使用iframe内嵌网页，并且双击实现网页全屏放大

利用Iframe插入网页

<iframe ref="iframe" src="https://www.taobao.com" frameborder="0" scolling="no"></iframe>

如果出现网页拒绝访问的情况可能与跨域有关，我在一开始的时候使用百度网址也被拒绝访问，后用淘宝网址嵌入成功。frameborder=0是不要边框, scolling="no"是不需要侧边滚动条，如有需要自行修改

双击实现iframe内嵌网页的双击放大过程

这个地方在实现过程中出现了很多问题，一开始想使用

this.$refs.iframe.width = document.documentElement.clientwidth
this.$refs.iframe.height = document.documentElement.clientheight

获取页面的值来实现全屏显示，但是后面运行代码时发现无法实现,原因如下:
打开的标签页中不只包含一个页面，iframe指向页面的document.documentElement.clientWidth不再等于浏览器宽度，而是等于iframe的宽度
https://www.cnblogs.com/nov5026/p/4630499.html

具体实现

template部分

        <div class="Test"><i class="el-icon-plus" @dbclick="fullScreen"></i><iframe ref="iframe" src="https://www.taobao.com" frameborder="0" scolling="no":style="{ width: isFullScreen ? '100%' : width, height: isFullScreen ? '100%' : height, backgroundColor: black }"></iframe></div>

data部分

data(){return{isFullScreen: false,}
}

beforedestroy部分

document.removeEventListener('fullscreenchange', this.fullscreenchange)

mounted部分

document.addEventListener('fullscreenchange', this.fullscreenchange)

methods部分

    fullscreenchange(e) {if (document.fullscreenElement == null) {this.isFullScreen = false}},fullScreen() {if (this.isFullScreen) {document.webkitCancelFullScreen()} else {this.$refs.iframe.requestFullscreen()}this.isFullScreen = !this.isFullScreen},

希望自己多多学习，坚持记录问题和解决办法加油！（这是第一次使用markdown，感觉还不错啊~）

vue框架中使用iframe内嵌网页，并且双击实现网页全屏放大相关推荐

html框架集把那根框架隐藏,HTML 框架集 frameset 和内嵌框架 iframe
HTML 框架集 frameset 和内嵌框架 iframe 今天总结和 < ifrme> 两个标签. frameset 标签用于定义一组框架集, 将多个窗口组合在一个框架集中, 各个子 ...
iframe内嵌框架自适应高度
添加js代码: /iframe内嵌框架自适应高度/ function iFrameHeight() { var ifm= document.getElementById("iframepag ...
iframe内嵌框架的强大
<iframe frameborder="0" style='border:0px;width:"+width+"px;height:"+hei ...
iframe 内嵌第三方网站 cookie 失效，解决办法
iframe 内嵌第三方网站 cookie 失效,解决办法网站iframe内嵌第三方带登录页的网站时,在ie和火狐和部分谷歌浏览器是可以的,但是在升级版的谷歌浏览器中是无法访问的问题是谷歌浏览器在 ...
php退出页面父元素,jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码...
iframe和弹窗这些词对于js高手来说都是耳熟能详的东西,作为一个新人来说,还在学习阶段的我就在工作中遇到这么一个奇葩的需求,要在引入的iframe页面里做一个全屏化的功能. 粗略一看,这还不容易, ...
chrome浏览器跨域Cookie的SameSite问题导致访问iframe内嵌页面异常
问题还原通过cas单点登陆访问系统,通过一个系统内嵌入第三方系统的页面,同时第三方系统也配置了cas.访问一个系统跳转到登陆页面,然后内嵌入iframe中的第三方系统又进入登陆页面. 初步分析,该系 ...
selenium登录斗鱼tv（切换iframe内嵌页面）
from selenium.webdriver import Chrome import time# 1.下载selenium # 2.将驱动放在python解释器文件夹中web = Chrome() ...
form表单的使用，iframe内嵌标签
一.form表单,表单名称使用name action 把当前表单中的数据提交到哪个程序去处理后端功能接口 method 表单的提交方式常用的两种方式, get:可以缓存到浏览器中,有长度限制(204 ...
html中怎么显示错误信息,在html中显示为内嵌错误的文本
我正在尝试在某个图片旁边的div工具栏中放置标题.问题在于我的文本放置不当,应该至少位于工具栏的顶部,而是位于底部并且不移动. 我希望它在左边的垂直中间靠近图片.在html中显示为内嵌错误的文本和画 ...

vue框架中使用iframe内嵌网页，并且双击实现网页全屏放大

vue框架中使用iframe内嵌网页，并且双击实现网页全屏放大

利用Iframe插入网页

双击实现iframe内嵌网页的双击放大过程

具体实现

vue框架中使用iframe内嵌网页，并且双击实现网页全屏放大相关推荐

最新文章

热门文章