vue引入外部URL链接
vue使用v-html引入外部URl链接
·
vue引入外部URL链接
大家应该都知道vue引用外部链接可以使用iframe,使用也很简单,那下面再为大家介绍另外一种写法
使用v-html,下面我就直接沾代码了, 基于vue3,写的比较简单,没有很完整的处理,就写了一个例子,大家只是参考一下,后期大家可以封装成组件,这里也不多说了,一看都会明白的,我也是只是做一个记录。
<template>
<div v-html="html" class="htmlClass"></div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import axios from 'axios'
onMounted(() => {
load('https://m.baidu.com/usrprofile?action=square')
})
const html = ref('')
function load(url) {
if (url && url.length > 0) {
// 加载中
let param = {
accept: 'text/html, text/plain'
}
axios.get(url, param).then((response) => {
// 处理HTML显示
html.value = response.data
}).catch(() => {
html.value = '加载失败'
})
}
}
</script>
<style scoped>
.htmlClass {
overflow-y: scroll;
height: 100vh;
}
div::-webkit-scrollbar {
display: none
}
</style>
注意事项:
- 直接使用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;
...
}
更多推荐
所有评论(0)