iframe去掉双滚动条

出现的问题：
页面一个滚动条，iframe引用的内容里有一个滚动条，非常难看。

去掉双滚动条
实现思想：
子页面（即被引用页面）通过postMessage把高度传给父页面（即引用页面，有iframe），父页面接收高度，重置本页面高度。

代码如下：

子页面：

<div ref="son1"><ul><li>多写一点，增加高度</li><!-- 多写一点，增加高度 --></ul>
</div>

mounted() {this.getHeight();
},
methods: {getHeight() {if (this.$refs.son1) {window.parent.postMessage(this.$refs.son1.offsetHeight + 35, "*");console.log("height:" + this.$refs.son1.offsetHeight);}},
},

要点：

页面给一个ref，目的：获得该部分高度；

用postMessage把高度传过去（注意postMessage的使用方法）

父页面：

<iframe src="http://localhost:8081/" frameborder="0" width="100%" :height="height"></iframe>

data() {return {height: "600",};
},mounted() {let _this = this;window.addEventListener("message", function (event) {var height = event.data;var h = Number(height);if (h) {_this.setHeight(height);}}, false);// 也可以写成这样：// window.addEventListener("message", receiveMessage, false);// function receiveMessage(event) {//   console.log("event:" + event);//   var origin= event.origin;//   console.log(origin);// }},methods: {setHeight(height) {this.$set(this, "height", height);},},

要点：

:height=“height” 用来接收高度；

mounted里的message事件，用来接收子页面的高度，即event.data；

高度有时是数值型，有时是对象，只有数值型可以用，所以需要做限制（为什么会有对象的格式，我也不知道）；

重置高度$set；

效果如下：只有页面上的一个滚动条

iframe去掉双滚动条相关推荐

iframe去除双滚动条
iframe嵌套的内容多的时候会自带滚动条一.问题描述二.问题处理 1.思路 2.实现三.效果一.问题描述当iframe嵌套的内容多的时候会自带滚动条,致使出现双滚动条,如图二.问题处理 ...
html框架页面不允许滚动条,关于html：使用iframe时如何摆脱双滚动条？
我已经在网上看到了这个问题,所有建议的解决方案都不适用于我,所以我想我会来这里的. 我有一个包含iframe的页面.页面顶部是一个下拉菜单,页面其余部分是iframe.就像我确定其他所有人一样,该想法 ...
iframe出现双层滚动条解决方案
2019独角兽企业重金招聘Python工程师标准>>> 在开发中出现一个iframe双滚动条问题,查了很多资料,网上的解决方案是定义iframe的onload事件,加载时重新加载高度 ...
iframe，body滚动条重复
一:开发的时候碰到一个滚动条问题,即页面出现两个滚动条,外面的是body的滚动条,里面是iframe的滚动条,大概就是如下图: 解决这个问题的方式无非两种: 1:去掉body滚动条 2:去掉ifram ...
JScrollPane 双滚动条
把滚动调设置一直出现,就有可能出现双滚动条的情况 jsp.setVerticalScrollBarPolicy(ScrollPaneConstants.VERTICAL_SCROLLBAR_ALWAY ...
好程序员web前端分享使用JavaScript正则表达式如何去掉双引号
为什么80%的码农都做不了架构师?>>> 好程序员web前端分享使用JavaScript正则表达式如何去掉双引号,最近接了一个项目,项目需求需要用js正则表达式过滤掉页面文本域 ...
好程序员分享使用JavaScript正则表达式如何去掉双引号
好程序员分享使用JavaScript正则表达式如何去掉双引号最近接了一个项目,项目需求需要用js正则表达式过滤掉页面文本域中值得双引号,其实解决办法很简单,下面把我写的代码分享给大家,有同样需求的朋友 ...
2021-03-04 mysql in里加个参数就查不到？？是JSON_EXTRACT导致的,用JSON_UNQUOTE()去掉双引号就正常了
mysql in里加个参数就查不到??是JSON_EXTRACT返回值带引号导致的,用JSON_UNQUOTE()去掉双引号就正常了 #JSON_UNQUOTE去掉双引号就正常了 SELECT p.* ...
php 去掉转义引号的反斜杠,PHP去掉json字符串中的反斜杠\及去掉双引号前的反斜杠...
PHP去掉json字符串中的反斜杠\及去掉双引号前的反斜杠通过AJAX传到PHP的json字符串有时候加上反斜杠"\"来转义,PHP处理时需要先去掉反斜杠,然后再json_dec ...

iframe去掉双滚动条

iframe去掉双滚动条相关推荐

最新文章

热门文章