VUE页面中加载外部HTML的示例代码


Posted in Javascript onSeptember 20, 2017

前后端分离,后端提供了接口。但有一部分数据,比较产品说明文件,是存在其他的服务器上的。

所以,在页面显示的时候,如果以页面内嵌的形式显示这个说明文件。需要搞点事情以达到想要的效果。

不同以往的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>

上一张效果图

VUE页面中加载外部HTML的示例代码

注意事项:

  • 直接使用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;

  ...
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中使用css需要注意的地方小结
Sep 01 Javascript
JQuery以JSON方式提交数据到服务端示例代码
May 05 Javascript
跟我学习javascript的执行上下文
Nov 18 Javascript
原生js实现移动端瀑布流式代码示例
Dec 18 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
May 10 Javascript
ReactNative页面跳转实例代码
Sep 27 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
Apr 13 jQuery
关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
May 12 Javascript
React和Vue中监听变量变化的方法
Nov 14 Javascript
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
Vue实现push数组并删除的例子
Nov 01 Javascript
js实现简单商品筛选功能
Feb 02 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
Sep 20 #Javascript
微信小程序 配置顶部导航条标题颜色的实现方法
Sep 20 #Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
Sep 20 #Javascript
用vue构建多页面应用的示例代码
Sep 20 #Javascript
微信小程序request请求后台接口php的实例详解
Sep 20 #Javascript
微信小程序 input表单与redio及下拉列表的使用实例
Sep 20 #Javascript
JavaScript实现图片本地预览功能【不用上传至服务器】
Sep 20 #Javascript
You might like
使用php验证复选框有效性的示例
2013/11/13 PHP
PHP获取指定月份第一天和最后一天的方法
2015/07/18 PHP
基于PHP实现等比压缩图片大小
2016/03/04 PHP
Yii配置与使用memcached缓存的方法
2016/07/13 PHP
yii2.0实现创建简单widgets示例
2016/07/18 PHP
PHP基于接口技术实现简单的多态应用完整实例
2017/04/26 PHP
Laravel框架模板加载,分配变量及简单路由功能示例
2018/06/11 PHP
php中关于换行的实例写法
2019/09/26 PHP
PHP如何防止用户重复提交表单
2020/12/09 PHP
JavaScript this调用规则说明
2010/03/08 Javascript
多个datatable共存造成多个表格的checkbox都被选中
2013/07/11 Javascript
jquery 添加节点的几种方法介绍
2013/09/04 Javascript
html dom节点操作(获取/修改/添加或删除)
2014/01/23 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
2014/06/20 Javascript
jquery实现网页定位导航
2016/08/23 Javascript
关于vue.js弹窗组件的知识点总结
2016/09/11 Javascript
vue.js将unix时间戳转换为自定义时间格式
2017/01/03 Javascript
详解Angular路由 ng-route和ui-router的区别
2017/05/22 Javascript
基于JavaScript实现无限加载瀑布流
2017/07/21 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
2017/08/25 Javascript
简述Angular 5 快速入门
2017/11/04 Javascript
微信小程序引入VANT组件的方法步骤
2019/09/19 Javascript
你知道JavaScript Symbol类型怎么用吗
2020/01/08 Javascript
JavaScript实现轮播图片完整代码
2020/03/07 Javascript
JS如何在不同平台实现多语言方式
2020/07/16 Javascript
Python网站验证码识别
2016/01/25 Python
对pyqt5之menu和action的使用详解
2019/06/20 Python
解决Django一个表单对应多个按钮的问题
2019/07/18 Python
python图像处理模块Pillow的学习详解
2019/10/09 Python
python复合条件下的字典排序
2020/12/18 Python
CSS3之transition实现下划线的示例代码
2018/05/30 HTML / CSS
英国最大的电子产品和家电零售企业:Currys PC World
2016/09/24 全球购物
新加坡最早生产电动滑板车的制造商之一:FunsToTheFore
2020/09/08 全球购物
岗位竞聘报告范文
2014/11/06 职场文书
Python使用openpyxl批量处理数据
2021/06/23 Python
警用民用对讲机找不同
2022/02/18 无线电