html页面在其他浏览器中渲染不出来

news2025/1/24 5:36:38

参考文章

问题

Vs code软件中live sever插件设置默认的浏览器是360浏览器,所以一直以来页面都是默认在360浏览器上进行打开并且没有问题。
后面想换谷歌浏览器打开html页面看下效果,发现图表和数据渲染不出来:
在这里插入图片描述

报错信息:
用json模拟从后台读取的数据全都不能正常读取
在这里插入图片描述

原因

  • 在浏览器打开本地的html文件, 请求的模型资源文件是一个本地文件, 协议是file协议
  • 如果是在服务器启动的话,则使用的是http或者https协议。因为用了Live Server插件,相当于在服务器启动,因此出于安全性考虑, 谷歌浏览器默认禁止了这种用法。
  • file协议和http/https协议不同,会被谷歌浏览器认为是跨域访问,所以导致页面一直加载不出图表和数据

解决

在VS code中对Live Server插件进行相关配置的修改,具体如下:

  • 打开VS code的Live Server插件的设置:
    在这里插入图片描述

  • 对插件默认的浏览器进行修改:
    Live Server>Settings:Custom Browser
    在这里插入图片描述

  • 这里选择谷歌浏览器,然后对html页面重新进行运行,页面就可以完整地渲染在谷歌浏览器上了。若在其他浏览器渲染不出来也可以进行相关的设置修改。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/413770.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

想制作出专业水准的音视频?掌握H.264编码技巧是关键

H.264编码原理 H.264,也被称为先进视频编码(AVC),是目前最流行的视频编码标准之一,其压缩效率很高。H.264编码基于视频编码的原始数据,使用一系列算法和技术以更小的比特率呈现更高质量的视频。以下是H.26…

【SSM】Spring6(十一.Spring对事务支持)

文章目录1.引入事务场景1.1准备数据库1.2 创建包结构1.3 创建POJO类1.4 编写持久层1.5 编写业务层1.6 Spring配置文件1.7 表示层(测试)1.8 模拟异常2.Spring对事务的支持2.1 spring事务管理API2.2 spring事务之注解方式2.3 事务的属性2.4 事务的传播行为…

春季儿童吃什么有助于长高,3款适合孩子长高的食谱做法,学起来

儿童身高一直以来都比较受到父母的关注,虽然身高不能说明一个人的能力有多强,但是会影响到人的外表。身高影响成败,一些专业对身高要求非常严格,因此大部分家长都希望孩子在身高方面能有一定的优势。 春季是孩子分泌生长激素增加时…

一位27岁软件测试员,测试在职近5年,月薪不到2W,担心被应届生取代

工作了近5年,一个月工资不到20K,担心被应届毕业生取代!互联网的快速发展伴随着员工适者生存的加速,测试员的薪资也在不断增长,以3年、5年、8年为一条分水岭。如果人们的能力和体力不够,他们就会被淘汰。看起…

【JavaEE】多线程CAS中的aba问题是什么?

博主简介:想进大厂的打工人博主主页:xyk:所属专栏: JavaEE初阶什么是CAS问题?CAS: 全称Compare and swap,字面意思:”比较并交换“,CAS中的aba问题是什么?请看本文讲解~~ 目录 文章目录 一、CAS是什么&am…

2023二建学天案例突破101问

2023 年二级建造师《公路》案例 101 问1.哪些情况下应进行长度宜不小于 200m的试验路段施工。(1)二级及二级以上公路路堤。(2)填石路堤、土石路堤;(3)特殊填料路堤;(4)特殊路基;(5)拟采用新技术、新工艺、新材料,新设备的路系。2.石质路暂的开挖方式有哪些!(1)钻爆开…

【笔记】响应表头中的Content-disposition

问题来源: 今天在做关于 怎样不通过使用插件的方式在HTML上预览本地C盘下的PDF文件,在生成PDF文件到C盘后,我想在下载和生成之间,再加一个PDF预览,就是先生成到C盘,再由用户来预览之后再决定是否下载&…

ModelNet40数据集

跑PointNet,modelnet40数据集时; 有些人直接用.off文件;——【CAD模型】普林斯顿形状Banchmark中的.off文件遵循以下标准: OFF文件全是以OFF关键字开始的ASCII文件。下一行说明顶点的数量、面片的数量、边的数量。 边的数量可以安全地省略。对模型不会有影响(可以为…

4/16学习周报

文章目录前言文献阅读摘要简介方法评估标准结果结论时间序列预测支持向量机SVM高斯过程GPRNNLSTMGRUtransformer总结前言 本周阅读文献《Real-time probabilistic forecasting of river water quality under data missing situation: Deep learning plus post-processing tech…

环境变量概念详解!(4千字长文)

环境变量! 文章目录环境变量!环境变量PATHexportexport的错误用法定义命令行变量环境变量哪里来的其他各种环境变量HOMEHOSTNAMELOGNAMEHISTSIZEPWD环境变量相关指令echoenvgetenv——相关函数!exportsetunset命令行参数argcargvenvpenvironp…

stata绘图指令

stata绘图指令 – 潘登同学的stata笔记 文章目录stata绘图指令 -- 潘登同学的stata笔记绘图概览韦恩图折线图连线图线性拟合图直方图函数图添加特殊字符和文字绘图概览 Stata 提供的图形种类: twoway 二维图scatter 散点图line 折线图area 区域图lfit 线性拟合图q…

漏洞扫描工具AWVS的安装及配置使用过程

简介 Acunetix Web Vulnerability Scanner(AWVS)可以扫描任何通过Web浏览器访问和遵循HTTP/HTTPS规则的Web站点。适用于任何中小型和大型企业的内联网、外延网和面向客户、雇员、厂商和其它人员的Web网站。 AWVS可以通过检查SQL注入攻击漏洞、XSS跨站脚…

LinuxGUI自动化测试框架搭建(三)-虚拟机安装(Hyper-V或者VMWare)

(三)-虚拟机安装(Hyper-V或者VMWare)1 Hyper-V安装1.1 方法一:直接启用1.2 方法二:下载安装1.3 打开Hyper-V2 VMWare安装注意:Hyper-V或者VMWare只安装一个,只安装一个,只…

SQL——34道经典例题之1-17

目录 1 查询每个部门最高薪水的人员名称 2 查询哪些人的薪水在部门平均薪水之上 3 查询每个部门的平均薪水等级 3.1 每个部门的平均薪水的等级 3.2 每个部门的平均的薪水等级 4 查询最高薪水(不用max函数) 5 查询平均薪水最高的部门的部门编号 …

FE_CSS CSS 的三大特性

1 层叠性 相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要解决样式冲突的问题 层叠性原则: 样式冲突,遵循的原则是就近原则,哪个样式离结构近,就执行哪个…

「C/C++」C/C++预处理器

博客主页:何曾参静谧的博客 文章专栏:「C/C」C/C学习 目录一、宏替换 #define1. 定义常量2. 定义函数3. 定义代码块二、条件编译 #if1. 使用 #ifdef 和 #endif 编译不同平台的代码2. 使用 #if 和 #else 编译不同版本的代码3. 使用 #ifndef 和 #define和#…

机器学习 00 交叉验证

一、什么是交叉验证(cross validation) 交叉验证:将拿到的训练数掘,分为训练和验证集。以下图为例: 将数据分成4份,其中一份作为验证集。然后经过4次(组)的测试,每次都更换不同的验证集。即得到4组模型的结果,取平均值作为最终结…

ENVI 5.6软件安装教程

软件下载 [软件名称]:ENVI 5.6 [软件大小]:3.25G [安装环境]:Win7~Win11或更高 软件介绍 ENVI 5.6是一款实现遥感图像处理的工具,已经广泛应用于科研、环境保护、气象、石油矿产勘探、农业、林业、医学、地球科学、公用设施管…

RK3568平台使用PyQt5遇到的_ZTI18QOpenGLTimeMonitor, version Qt_5问题解决

1、背景 由于开发需要在ubuntu 20.04 RK3568平台上面使用PyQt5来运行GUI软件,整个软件的环境如下:python3.8 PyQt5 5.14.1版本 fireflyfirefly:/usr/bin$ pip list Package Version ---------------------- -------------------- blink…

4.基于多目标粒子群算法冷热电联供综合能源系统运行优化

4.基于多目标粒子群算法冷热电联供综合能源系统运行优化《文章复现》 相关资源代码:基于多目标粒子群算法冷热电联供综合能源系统运行优化 基于多目标算法的冷热电联供型综合能源系统运行优化 考虑用户舒适度的冷热电多能互补综合能源系统优化调度 仿真平台:matl…