iframe嵌入本地文件
时间: 2023-12-09 17:37:02 浏览: 37
在HTML中,可以使用`<iframe>`标签来嵌入本地文件。以下是两种在Vue中嵌入本地文件的方法:
方法一:
```html
<iframe src="/static/b.html" width="100%" height="100%" ref="iframeDom"></iframe>
```
方法二:
```html
<template>
<div class="wrap">
<iframe ref="iframe" :src="htmlSrc" width="100%" height="50%" frameborder="0"></iframe>
</div>
</template>
<script>
export default {
data() {
return {
htmlSrc: 'static/test.html',
};
},
};
</script>
<style lang="scss" scoped>
.wrap {
width: 100%;
height: 500px;
}
</style>
```
关于如何在iframe中进行相互通信,可以使用`window.parent`和`window.frames`属性来实现。具体方法如下:
在父页面中,可以使用`contentWindow`属性来获取子页面的`window`对象,从而实现向子页面发送消息:
```javascript
const iframe = this.$refs.iframe;
const childWindow = iframe.contentWindow;
childWindow.postMessage('message', '*');
```
在子页面中,可以使用`parent`属性来获取父页面的`window`对象,从而实现向父页面发送消息:
```javascript
window.parent.postMessage('message', '*');
```