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 相关文章推荐
用js自动判断浏览器分辨率的代码
Jan 28 Javascript
js中把JSON字符串转换成JSON对象最好的方法
Mar 21 Javascript
jQuery制作可自定义大小的拼图游戏
Mar 30 Javascript
jQuery实现摸拟alert提示框
May 22 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
Oct 10 Javascript
js Canvas实现的日历时钟案例分享
Dec 25 Javascript
jQuery密码强度验证控件使用详解
Jan 05 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
Feb 17 Javascript
Vue父子组建的简单通信之控制开关Switch的实现
Jun 04 Javascript
详解Vue组件插槽的使用以及调用组件内的方法
Nov 13 Javascript
JS关闭子窗口并且刷新上一个窗口的实现示例
Mar 10 Javascript
浅谈JS for循环中使用break和continue的区别
Jul 21 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学习笔记之二
2011/01/17 PHP
用php来限制每个ip每天浏览页面数量的实现思路
2015/02/24 PHP
joomla组件开发入门教程
2016/05/04 PHP
PHP递归遍历文件夹去除注释并压缩php源代码的方法示例
2018/05/23 PHP
PHP实现十进制数字与二十六进制字母串相互转换操作示例
2018/08/10 PHP
phpwind放自动注册方法
2006/12/02 Javascript
如何判断图片地址是否失效
2007/02/02 Javascript
jquery绑定原理 简单解析与实现代码分享
2011/09/06 Javascript
js修改原型的属性使用介绍
2014/01/26 Javascript
js调试系列 初识控制台
2014/06/18 Javascript
JavaScript的作用域和块级作用域概念理解
2014/09/21 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
2015/07/27 Javascript
javascript实现自动输出文本(打字特效)
2015/08/27 Javascript
零基础轻松学JavaScript闭包
2016/12/30 Javascript
JQuery和HTML5 Canvas实现弹幕效果
2017/01/04 Javascript
bootstrap是什么_动力节点Java学院整理
2017/07/14 Javascript
BootStrap modal实现拖拽功能
2018/12/01 Javascript
浅谈vue 多个变量同时赋相同值互相影响
2020/08/05 Javascript
vue npm install 安装某个指定的版本操作
2020/08/11 Javascript
Python实现统计文本文件字数的方法
2017/05/05 Python
python bottle框架支持jquery ajax的RESTful风格的PUT和DELETE方法
2017/05/24 Python
Python解析json之ValueError: Expecting property name enclosed in double quotes: line 1 column 2(char 1)
2017/07/06 Python
python编写Logistic逻辑回归
2020/12/30 Python
使用pandas读取csv文件的指定列方法
2018/04/21 Python
Python中按值来获取指定的键
2019/03/04 Python
python+OpenCV实现车牌号码识别
2019/11/08 Python
检测tensorflow是否使用gpu进行计算的方式
2020/02/03 Python
基于python实现MQTT发布订阅过程原理解析
2020/07/27 Python
mysql的最长数据库名,表名,字段名可以是多长
2014/04/21 面试题
个人能力自我鉴赏
2014/01/25 职场文书
社区庆八一活动方案
2014/02/02 职场文书
2014年两会学习心得体会
2014/03/10 职场文书
坚定理想信念心得体会
2014/03/11 职场文书
服务型党组织建设典型材料
2014/05/07 职场文书
董事长岗位职责
2015/02/13 职场文书
Win10 和 Win11可以共存吗? win10/11产品生命周期/服务更新介绍
2021/11/21 数码科技