【JavaScript】【Vue】中使用 iframe 标签引用html项目、隐藏iframe标签内容

iframe 标签使用

在vue组件里使用iframe：

<template>
    <div id="mapBox">
        <iframe width="100%" height="500px" :src="html" frameborder="0">	
        </iframe>
    </div>
</template>

data中设置html文件的路径：

  data: function () {
    return {
      html:"../../public/mapbox/indoorMap-1/indoorMap.html",
    };
  },

设置路径时需要注意，不行就多试几次。

隐藏 iframe 标签的内容

直接用宽度和高度控制iframe显隐。

// 显示：
 <iframe width="100%" height="500px" :src="html" frameborder="0">	
 </iframe>
// 隐藏：
 <iframe width=0 height=0 :src="html" frameborder="0">	
 </iframe>