vue内嵌iframe传值
时间: 2023-10-11 08:07:26 浏览: 108
在Vue中内嵌第三方网页可以通过使用iframe来实现。可以将iframe的src属性设置为需要嵌入的第三方页面的URL,然后将iframe添加到Vue组件的模板中。例如,在Vue组件的template中添加以下代码来嵌入一个iframe:
```html
<template>
<div>
<iframe src="http://example.com" id="iframe" scrolling="no" frameborder="0"></iframe>
</div>
</template>
```
然后,在样式部分通过设置iframe的宽度和高度来控制其显示的尺寸:
```html
<style>
#iframe {
width: 100%;
height: calc(100vh - 115px);
}
</style>
```
这样就可以在Vue中成功内嵌第三方网页了。请注意,为了避免安全问题,可能需要在后台进行一些设置,比如设置X-Frame-Options配置的值为disable来允许iframe访问本服务资源。具体的设置可以参考后台的安全配置文档。
另外,如果需要在Vue中动态加载多个iframe页面,可以通过循环创建多个iframe元素并设置不同的src属性来实现。通过控制这些iframe元素的显示与隐藏,可以实现在同一个页面中加载多个第三方网页。例如可以通过将iframe和router-view放在同一个页面,并通过循环创建多个iframe元素来加载不同的页面,然后通过显示和隐藏来控制这些iframe的加载和展示。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>
阅读全文