页面通过js获取并加载远程html文件，移除html文件中不需要的内容，修改html文件中img图片的路径

当我们需要在页面加载远程的html文件时，首先需要获取这个文件：

this.$axios(htmlUrl)

移除html文件里一些无用的元素，然后加载html：

this.$axios(htmlUrl).then(res => {// 获取远程html文件，移除其中无用的元素后，加载到textWrap里let tempDiv = $(`<div>${res.data}</div>`)tempDiv.find('meta').remove()tempDiv.find('title').remove()tempDiv.find('link').remove()tempDiv.find('script').remove()tempDiv.find('style').remove()textWrap.html(tempDiv.html())})

如果html文件中有img图片，我们加载html后img图片可能会因为路径错误而不显示，此时需要修改图片路径：

if(textWrap.find('img').length) {textWrap.find('img').attr('src', imgSrc)
}

页面通过js获取并加载远程html文件，移除html文件中不需要的内容，修改html文件中img图片的路径相关推荐

nw.js 使用记录 - 加载远程URL
使用的是加载远程URL的方式一. Package.json的内容如下: {"main": "index.html", "name": &q ...
用手机UC浏览器页面打开vue项目，图片，css，js都没加载
用手机UC浏览器页面打开vue项目,图片,css,js都没加载用HBuilder X创建了一个普通的vue项目,在电脑上使用浏览器看没有什么问题,然后提交到了公司的服务器上,发现用手机,除了火狐,谷 ...
【微前端开发环境下，加载远程子应用的实战。】
一开始我们的本地开发运行的环境,如果没有启动子应用的话.对应的页面是白屏的. 问题: 当有关联资源需要跳转时无法跳转,需要额外打开一个浏览器tab页到环境上面执行操作. 当bug类型为纯ui-serv ...
ajax加载远程数据
ajax加载远程数据概述回调函数数据类型发送数据到服务器高级选项实例概述通过 HTTP 请求加载远程数据. jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, . ...
EasyDSS高性能流媒体服务器前端重构(五)- webpack + vue-router 开发单页面前端实现按需加载 - 副本...
为了让页面更快完成加载, 第一时间呈现给客户端, 也为了帮助客户端节省流量资源, 我们可以开启 vue-router 提供的按需加载功能, 让客户端打开页面时, 只自动加载必要的资源文件, 当客户端操 ...
js的动态加载、缓存、更新以及复用（四）
本来想一气呵成,把加载的过程都写了,但是卡着呢,所以只好在分成两份了. 1.页面里使用<script>来加载 boot.js . 2.然后在boot.js里面动态加载 bootLoad.j ...
Python爬虫获取异步加载站点pexels并下载图片(Python爬虫实战3)
Python爬虫获取异步加载站点pexels并下载图片(Python爬虫实战3) 1. 异步加载爬虫对于静态页面爬虫很容易获取到站点的数据内容,然而静态页面需要全量加载站点的所有数据,对于网站的访问 ...
纯JS实现懒加载+瀑布流布局
瀑布流布局一般用于图片布局,其视觉表现为参差不齐的多栏布局,随着页面的滑动,会不断加载新的图片. 懒加载主要用于实现提高系统的响应速度.对于图片比较多的网页,如果一次性加载出所有的图片,会导致系统的加 ...
【项目技术点总结之一】vue集成d3.js利用svg加载图片实现缩放拖拽功能
[项目技术点总结之一]vue集成d3.js利用svg加载图片实现缩放拖拽功能前言概述技术介绍实现过程插件安装引用组件初始化组件实现效果简单理解使用d3创建一个svg 在svg中提添 ...

页面通过js获取并加载远程html文件，移除html文件中不需要的内容，修改html文件中img图片的路径

页面通过js获取并加载远程html文件，移除html文件中不需要的内容，修改html文件中img图片的路径相关推荐

最新文章

热门文章