在vue里面window.open(‘http://192.168.1.78:8012/onlinePreview?url=’ + encodeURIComponent(this.$Base64.encode(fileUrl)))打开的页面如何内嵌到page3页面里面去
时间: 2024-09-28 15:13:07 浏览: 34
Vue中通过<script></script>引入的Vue.js文件
5星 · 资源好评率100%
在Vue.js中,如果你想要在一个页面(假设是page3.vue)内部打开一个新的窗口,并将内容内嵌显示,通常情况下,新打开的页面并不会直接内嵌到当前页面中。但是,你可以通过一些方法模拟这样的效果,比如:
1. **iframe嵌套**:
在`page3.vue`里,你可以创建一个`<iframe>`标签,动态设置其`src`属性,让它指向新打开的页面URL。例如:
```html
<div>
<button @click="openWindow">打开预览</button>
<iframe v-if="previewVisible" :src="previewUrl" style="display:none;"></iframe>
</div>
...
data() {
return {
previewVisible: false,
previewUrl: '',
}
},
methods: {
openWindow() {
this.previewUrl = 'http://192.168.1.78:8012/onlinePreview?url=' + encodeURIComponent(this.$Base64.encode(fileUrl));
this.previewVisible = true; // 显示iframe
}
}
```
2. **JavaScript API通信**:
如果你想在两个页面之间传递数据,可以利用Vue的特性,比如事件总线(Event Bus),或者使用Vuex管理状态。然后在新打开的页面加载完成之后,通过API调用返回到`page3.vue`并更新UI。
记得在实际应用中,处理跨域问题也是一个需要考虑的因素,如果目标服务器设置了同源策略,你需要解决这个问题才能让页面正常加载。
阅读全文