vue引入外部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;...
}