首页 / 知识
HTML+CSS入门知识 VUE页面中如何加载外部HTML
2023-04-11 13:47:00
前后端分离，后端提供了接口。但有一部分数据，比较产品说明文件，是存在其他的服务器上的。
所以，在页面显示的时候，如果以页面内嵌的形式显示这个说明文件。需要搞点事情以达到想要的效果。
不同以往的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=''
this.url2=''
},
methods: {
}
}</script>
上一张效果图
注意事项：
直接使用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;
…
}
|
最新内容
相关内容
python如何判断一个数是素数
python如何判断一个数是素数，数字，代码，培训，质数，素数，方法，个数，自然数，不是，思路，python如何判断一个数是素数的方法：一个大于1的自然数，除
python如何比较两个字符串是否相等
python如何比较两个字符串是否相等，培训，工作，字符串，两个，下面，以上，方法，更多，内容，python在实际的开发工作中，经常会遇到要判定两个字符串
python如何确定是否为可迭代对象
python如何确定是否为可迭代对象，培训，元素，索引，对象，整数，字典，函数，类型，下标，模块，迭代可以理解为，任意的集合使用for循环遍历python中，迭
python如何调用mysql
python如何调用mysql，培训，流程，一致，密码，数据，数据库，数据库连接，接口，语句，方法，DB-API是一个规范.它定义了一系列必须的对象和数据库存取
python如何打印列表长度
python如何打印列表长度，培训，技术，概念，项目，列表，长度，数组，方法，鲜为人知，初始化，首先，我们需要明确的一点就是Python是没有数组这一概念的
python如何求一个数的平方
python如何求一个数的平方，培训，平方根，个数，整数，函数，模块，方法，小数，表达式，数值，用python进行数学计算，可以使用python内置的函数模块，下面
python判断dict中key是否存在
python判断dict中key是否存在，培训，通用，第一，字典，方法，结果，函数，属性，做法，上面，今天来说一下如何判断字典中是否存在某个key，一般有两种通python代码如何在命令行运行
python代码如何在命令行运行，代码，培训，路径，空格，文件，下面，以上，目录，更多，内容，我们在编写python代码时，可以在交互模式下运行代码，也可以用
python如何自定义一个函数
python如何自定义一个函数，代码，名称，培训，函数，圆括号，参数，定义，表达式，选择性，字符串，python函数是组织好的，可重复使用的，用来实现单一，或相python如何获取cookie
python如何获取cookie，培训，网上，代码，方法，属性，以上，更多，内容，介绍下3种python获取cookie的方法。(1)借助handler这种方法也是网上介绍
python判断字符串是否包含中文
python判断字符串是否包含中文，培训，检测，代码，字符串，中文，字符，范围，空格，原理，以上，原理：中文字符的编码范围是：\u4e00-\u9fff只要编码在
python如何操作mysql数据库
python如何操作mysql数据库，培训，标准，项目，密码，数据库，接口，表字，操作，用户，机子，Python标准数据库接口为PythonDB-API，PythonDB-API为开发