一、 vueiframe跨域
在项目中，有时会需要引入外部的无关联组件或页面，此时可以通过iframe来实现。但是vue中的iframe涉及到跨域问题，如何解决呢？
一般来说，如果父页面和子页面不同源，则会出现跨域问题。所以我们可以在后台设置响应头中的Access-Control-Allow-Origin，将源地址设置为’*’,即可允许所有外域请求。
后台代码示例（node.js）：
“`
app.use(function (req, res, next) {
res.header(“Access-Control-Allow-Origin”, “*”);
res.header(“Access-Control-Allow-Headers”, “Content-Type”);
res.header(“Access-Control-Allow-Methods”, “PUT,POST,GET,DELETE,OPTIONS”);
next();
});
“`
二、vueiframe只需载一次
每次切换路由或者重新加载页面时，vue会重新创建组件和iframe，这会造成很大的性能浪费。如何避免重复载入呢？
我们可以通过keep-alive来缓存组件，避免重新渲染。同时，设置一个变量checked来标记iframe是否已经载入，如果已经载入则不需要重新载入。
代码示例：
<template>
<keep-alive>
<div>
<iframe
id="my-iframe"
v-if="!checked"
:src="url"
@load="frameOnload">
</iframe>
</div>
</keep-alive>
</template>
<script>
export default {
data: () => ({
checked: false,
}),
methods: {
frameOnload() {
this.checked = true
}
}
}
</script>
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/282788.html
微信扫一扫 
支付宝扫一扫 