iframe代码调用网页并隐藏导航栏的方法

我们做网站时有时需要调用第三方网页，但是有一点比较麻烦，就是如果引入完整页面的话，会出现两个导航栏。那么有没有办法即用iframe调用网页，又隐藏导航栏，将网页完美融入当前页面呢？答案是可以的，用代码设置好边距是可以实现了。

iframe引入第三方页面

以下是完整的iframe隐藏导航栏的调用代码，我们只要将此代码放入需要引入页面的html中，并适当调整一下细节就可以了。

（1）src 里面写要引入的第三方页面的链接

（2）iframe 一定要放在div里面，最外层div的position =relative，里层的div的position=adsolute

<div align="center" style="margin:0 auto;">
<div style="width:100%;height:600px;overflow:hidden;border:0px"> 
<div style="margin:-122px 0px 0px -10px;position:relative"> #这里的position = relative 是必须的
<iframe src="http://ucsc.crg.eu/cgi-bin/hgTracks?db=mm10;position=chr11:61507627-61509532" id="ifyemian" scrolling="no" frameborder="0"
style="position:absolute; //这里的position = acsolute也是必须的
width: 100%;
height: 100vh;
display:block;
left: 0;
right:0;">
</iframe>
</div>
</div>
</div>

————————————————
本文为CSDN博主「佛系盼毕业」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_51192038/article/details/123313414

iframe隐藏导航栏

可以直接在`里层的div中的margin-top设置需要隐藏的网站头部，margin-top = -122px，这个-122px 可以根据自己的需求调整，页面就会往上移动，隐藏自己不需要的导航栏等部分。

用JS隐藏网站底部

js部分在mounted钩子函数中，渲染：

mounted(){
function changeifyemianfIframe() {
const mobsf = document.getElementById('ifyemian'); #根据id选择对应要处理的部分
const deviceWidth = document.body.clientWidth;
const deviceHeight = document.body.clientHeight;
mobsf.style.width = (Number(deviceWidth) - 220) + 'px'; //数字是页面布局宽度差值
mobsf.style.height = (Number(deviceHeight) - 380) + 'px'; // 这部分可以从下至上剪掉页面不需要的部分
}

changeifyemianfIframe()
window.onresize = function () {
changeifyemianfIframe()
}
}

iframe代码是我们平时建站经常会用到的代码，但是大多数代码都偏于简单，像这么“完美”的调用效果可不多见，即使暂时用不到，也建议大家收藏一下，以备不时之需。