• -------------------------------------------------------------
  • ====================================

如何在vue+element项目中利用iframe嵌入第三方网页并实现根据浏览器自适应大小

建站指南 dewbay 2年前 (2022-07-04) 3927次浏览 已收录 0个评论 扫描二维码

前段时间利用 python+vue+element做了个安全测试平台项目,准备嵌入 mobsf 这个 APP 扫描工具,是利用iframe实现的

具体代码如下:

①scrolling=“no”表示不显示滚动条

②style=”position:absolute;top:80px;left: 120px;” 表示嵌入的iframe位置距离浏览器顶部 80px,距离浏览器左侧 120px,刚好是我的侧边栏和顶部导航栏的宽度

③mounted()中的方法在模板渲染成 html 后调用,通常是初始化页面完成后,再对 html 的 dom 节点进行一些需要的操作。包括调整页面的高和宽

④changeMobsfIframe 为自适应宽高的方法,分别在第一次页面加载和调整浏览器大小(onresize ())时被调用、

 

<template>
<div>
<iframe src=”http://0.0.0.0:8080&#8243; id=”mobsf” scrolling=”no” frameborder=”0″ style=”position:absolute;top:80px;left: 120px;”></iframe>
</div>
</template>

<script>
export default {
data () {
return {
}
},
mounted(){
/**
* iframe-宽高自适应显示
*/
function changeMobsfIframe(){
const mobsf = document.getElementById(‘mobsf’);
const deviceWidth = document.body.clientWidth;
const deviceHeight = document.body.clientHeight;
mobsf.style.width = (Number(deviceWidth)-120) + ‘px’; //数字是页面布局宽度差值
mobsf.style.height = (Number(deviceHeight)-80) + ‘px’; //数字是页面布局高度差
}

changeMobsfIframe()

window.onresize = function(){
changeMobsfIframe()
}
},
}
</script>
效果如下所示

如何在vue+element项目中利用iframe嵌入第三方网页并实现根据浏览器自适应大小

 


露水湾 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:如何在vue+element项目中利用iframe嵌入第三方网页并实现根据浏览器自适应大小
喜欢 (1)
[]
分享 (0)
关于作者:
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址