前后端分離，后端提供了接口。但有一部分數據，比較產品說明文件，是存在其他的服務器上的。
所以，在頁面顯示的時候，如果以頁面內嵌的形式顯示這個說明文件。需要搞點事情以達到想要的效果。
不同以往的IFRAME標簽，那種方式比較Low，另外有其他的一些BUG。
本文思路是把HTML請求以來，以v-html的形式加載到頁面內部。注冊全局組件【v-html-panel】
1.HtmlPanel.vue文件
<template> <div> <mu-circular-progress :size="40" v-if="loading"/> <div v-html="html"></div> </div></template><style></style><script> export default{ // 使用時請使用 :url.sync=""傳值 props: { url: { required: true } }, data () { return { loading: false, html: '' } }, watch: { url (value) { this.load(value) } }, mounted () { this.load(this.url) }, methods: { load (url) { if (url && url.length > 0) { // 加載中 this.loading = true let param = { accept: 'text/html, text/plain' } this.$http.get(url, param).then((response) => { this.loading = false // 處理HTML顯示 this.html = response.data }).catch(() => { this.loading = false this.html = '加載失敗' }) } } } }</script>htmlViewSample.vue
<template> <div> <v-html-panel :url.asyc="url1"></v-html-panel> <v-html-panel :url.asyc="url2"></v-html-panel> </div></template><style scoped> div{color:red}</style><script> export default{ data () { return { url1: '', url2: '' } }, mounted () { this.url1 = 'http://file.xxx.com/group1/M00/0C/F5/xxxxxxxx.html' this.url2 = 'http://file.xxx.com/group1/M00/0D/3B/yyyyyyy.html' }, methods: { } }</script>上一張效果圖
注意事項：
NGINX跨域配置：
（Origin如果使用*的話，好像會出錯，這里直接使用請求源的地址，如果擔心安全性的話，可以用if+正則條件判斷下）
location / { add_header Access-Control-Allow-Origin $http_origin; add_header Access-Control-Allow-Credentials true; add_header Access-Control-Allow-Methods GET; access_log /data/nginx/logs/fdfs_https.log main; ...}以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
