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);
    }
  },
},

要点：

1. 页面给一个ref，目的：获得该部分高度；
2. 用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);
    },
  },

要点：

1. :height=“height” 用来接收高度；
2. mounted里的message事件，用来接收子页面的高度，即event.data；
3. 高度有时是数值型，有时是对象，只有数值型可以用，所以需要做限制（为什么会有对象的格式，我也不知道）；
4. 重置高度$set；

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