今天分享下”前端入门 VUE界面要怎么载入外部链接“这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。 前后端分离,后面给予了插口。但有一部分数据信息,较为产品说明文档,是出现其它的云服务器上的。
因此 ,在页面表明的情况下,假如以页面嵌入的形式表明这一表明文档。必须搞点事儿以实现需要的实际效果。
不一样往常的IFRAME标识,那类方法较为Low,此外有其余的一些BUG。
文中思路是把HTML要求至今,以v-html的形式载入到页面內部。申请注册全局部件【v-html-panel】
1.HtmlPanel.vue文件
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=‘加载失败’
})
}
}
}
}
htmlViewSample.vue
div{color:red}
export default{
data (http://www.qlyl1688.com/products/ycxsys6152.html) {
return {
url1: ‘’,
url2: ‘’
}
},
mounted () {
this.url1=’’
this.url2=’’
},
methods: {
}
}
上一张效果图
注意事项:
直接使用axios处理的GET请求,需要处理跨域
外部的css样式会作用到显示的html
同时加载的外部html里的script也可能会执行,需要按需处理下
外部HTML文件内部的相对路径将不会被自动识别,绝对路径可以
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;
…
}
今天的文章就分享到这啦,内容转自divcss5平台,下篇文章再见!