VUE页面中加载外部HTML

方法1，用iframe

vue页面

<template><button @click="invokeHtmlMethod">调用html种方法</button><div class="iframestyleset"><iframe  name = "iframeMap" id="iframeMapViewComponent"  v-bind:src="getPageUrl"width="100%" height="100%"frameborder="0" scrolling="no" ref="iframeDom"></iframe></div>
</template>export default {data() {return {getPageUrl: 'static/testMsgWithIframe.html'}},created() {// 初始化时为window绑定一个方法window['vueDefinedMyProp'] = (receiveParams) => {this.receiveParamsFromHtml(receiveParams)}},methods: {receiveParamsFromHtml(res) {console.log(res)},invokeHtmlMethod() {window.frames['iframeMap'].lodaTable()},}

html页面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<button onclick="invockIframeMethod()">点击调用iframe</button>
<script>function invockIframeMethod() {// 是用widow调用vue绑定的vueDefinedMyProp方法window.parent['vueDefinedMyProp']('you are Superman!');}function lodaTable() {let num = 10;while (num>0){console.log(`number :${num}`);num--;}}</script>
</body>
</html>

结果：

方法2

把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 = truelet param = {accept: 'text/html, text/plain'}this.$http.get(url, param).then((response) => {this.loading = false// 处理HTML显示this.html = response.data}).catch(() => {this.loading = falsethis.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>

注意事项：

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

VUE页面中加载外部HTML相关推荐

vue与外部html通信,VUE页面实现加载外部HTML方法
VUE页面实现加载外部HTML方法 VUE页面实现加载外部HTML方法前后端分离,后端提供了接口.但有一部分数据,比较产品说明文件,是存在其他的服务器上的.所以,在页面显示的时候,如果以页面内嵌的形 ...
VUE页面实现加载外部HTML方法
本文思路是把HTML请求以来,以v-html的形式加载到页面内部.注册全局组件[v-html-panel] 1.HtmlPanel.vue文件 1 2 3 4 5 6 7 8 9 10 11 12 1 ...
iframe中加载html,在iframe中加载外部html并访问内容
我只需要提供src属性即可加载外部页面时,我需要知道如何访问iframe内容.在iframe中加载外部html并访问内容我正在使用iframe在jquery对话框中加载HTML页面.在这里,我不能修 ...
Vue项目中加载图片的坑
Vue项目中加载图片时,遇到的坑 1.当直接在标签中,使用图片路径,此时可以正常显示. <img src='img_src' /> 正常显示 2.当img标签的src属性为变量时,且该变量 ...
QT中main函数中加载外部字体：OTF
QT中main函数中加载外部字体:OTF 我们开发的程序中,如果想使用外部下载的开源字体,同时保证在软件发布时,程序字体能保证和开发者环境下一致,且不想通过安装字体方式实现字体跟随软件时,我们需要在代 ...
在Vue.js中加载字体的最佳做法
博客原文:https://blog.zhangbing.site/2021/04/07/best-practices-for-loading-fonts-in-vue/ 添加字体不应该对性能产生负面影 ...
要注意页面中加载的第三方脚本
如果页面需要加载第三方的脚本,或访问第三方URL的时候,除非特殊需要,否则一定不要放在页面代码的头部,而应该放在页面的最底部,最晚加载.这样有利于加快网站的速度.因为如果第三方面脚本下载很慢的话,那整 ...
在HTTPS安全页面中加载HTTP不安全的内容，如何绕过安全警告？
简介毫无疑问,如今互联网正在一步一步向HTTPS安全迈进.大多数大公司都会将证书应用到他们的网站上,以获得安全保护.这时你可能就有疑问了:这能保证安全到何种程度呢?除了可以抵御中间人攻击(MITM) ...
vue项目中加载使用腾讯地图
在vue-cli脚手架搭建的vue项目里使用到了腾讯地图.看了腾讯地图的官方给出的API(https://lbs.qq.com/javascript_v2/index.html)敲了一遍代码,才有点感 ...
vue导入静态js_如何在vue js中加载静态图像
我有一个组件,它接受一个prop字符串,即一个url.它可以是远程图片,也可以是资产文件夹中的本地静态资产. 目录结构: -assets/ - logo.png -app.vue -component ...

VUE页面中加载外部HTML

方法1，用iframe

vue页面

html页面

方法2

VUE页面中加载外部HTML相关推荐

最新文章

热门文章