一、 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/zh-tw/n/282788.html
微信掃一掃 
支付寶掃一掃 