[JavaScript知识库]iframe 引入第三方页面，并去掉页面的导航栏和下半部分，只显示部分页面的方法

iframe 引入第三方页面，并去掉页面的导航栏和下半部分，只显示部分页面的方法

我用的elementui 画的页面，和html一样

用iframe引入第三方页面

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

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

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

        <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>

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()
    }
}

展示：