页面第一次加载，JS没有效果，刷新一下就好了

最新推荐文章于 2023-10-17 18:47:54 发布

转载最新推荐文章于 2023-10-17 18:47:54 发布 · 3k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/winv758241/p/6811113.html

文章标签：

#前端 #javascript #ViewUI

探讨了在页面跳转过程中遇到的JavaScript加载异常问题，特别是在第三个页面上JS脚本失效的情况。通过调整SSM控制器返回类型、使用target=_top属性以及采用a标签代替表单提交按钮的方法，成功解决了JS加载失败的问题。但问题的根本原因仍待进一步探究。

问题详述：页面跳转的时候，第一个第二个页面都没有问题，跳到第三个页面，JS脚本没有起作用，刷新一下就好了。

1.猜测：第一个页面和第二个页面的JS，会对第三个页面产生影响，（因为之前没有这个问题，只改第二个页面居然会让第三个页面失效。）

　　将ssm的控制器，不用String返回跳转的方式，而采用获取HttpServletResponse，然后重新定向跳转到页面，可行。

2.找到学前端的帮忙调试一下：href跳转的时候，加上target="_top"属性也可行。

3.后续问题：表单提交按钮提交一次，重新回到页面，JS再次不加载了，但是button的提交方式又没有target="_top"属性，无奈之下采用a标签的方式替代按钮。

问题原因还不知道，希望明白问题根本的专业人士解答

转载于:https://www.cnblogs.com/winv758241/p/6811113.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

dingpang8324

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

nuxt中使用字体图标，解决第一次可以加载出来，刷新页面图标消失的问题

小多的博客

08-05

642

排除相对路径问题使用

页面定时刷新(1秒刷新一次)

09-04

在上述的标题和描述中提到的"页面定时刷新(1秒刷新一次)"，就是指每隔一秒钟，页面内容会自动更新一次，以显示最新的数据。这通常通过JavaScript语言来实现，下面我们将详细介绍这一技术。 JavaScript是Web开发中的...

参与评论您还未登录，请先登录后发表或查看评论

【js】第一次加载js失效，如果我再刷新则会成功，why?

z767327552的专栏

08-25

7631

当ajax正在运作请求的时候，jquery是不会加载完整的一个页面的，它只是会提取这个页面的头部标签。这个逻辑是这么进行处理的，jquery提取了头部标签只是为了更快的去加载这个页面，减少下载或者请求加载的时间，然后自己提取出的头部标签再和剩下的html页面整合成一个完整的页面。这就是为什么为先得到头部导航。 jquery依旧不会先运作任何js在ajax尚未加载完全或者正在进行请求的时候

nginx部署前端项目 nginx部署无法加载js/css问题 Uncaught SyntaxError: Unexpected token ‘＜‘

weixin_43091752的博客

10-17

6739

注意：将多个html项目放在一个server中出现js,css加载不出来问题。可以将文件放在主项目同级目录下（暂时解决，可能是静态资源配置问题，不会弄）。6.处理所有引用的部分前面加上，在conf中添加的映射路径。5.普通html项目，部署会出现以下错误。3.修改nginx.conf文件。4.修改端口防止占用和添加新映射。2.将项目放入html目录下。1.下载nginx,解压。

解决nginx部署后css、js、图片等样式不加载的问题

热门推荐

叶新东老师的博客

09-02

10万+

这里有2种方案可以解决，这里只介绍第一种，第二种我也没试过，但是觉得应该可行 1、修改nginx的conf配置文件 2、更改web服务器contextPath为ip+端口的方式，举例：HttpServletRequest.getContextPath(); 使用nginx的反向代理后，发现页面能正常跳转，可是css、js和相关的图片就是不出来,如下图查看了a标签内的链接发现，c...

ajax动态加载js，导致js不执行失效问题

大庄园

12-02

1万+

一、首先必须清楚，ajax动态加载的js，是全部的js都不好使，都不执行，都无效了吗？这点，我认为很关键，但是网上的文章都其实是一篇文章，是一个人写的。他并没有强调这一点，导致所有的文章都没有说这一点，其实并不是的。比如我们自己在addNews.jsp中的addNews.js（很简单，比如就是几个js方法，或者加上$(document).ready之类的）中写的js代码，虽然是ajax动态

Vue路由首次跳转加载不出某个组件或显示空白，刷新一次才可显示（遇到的坑）

a1071626267的博客

09-08

5202

Vue路由首次跳转加载不出footer组件，刷新一次才可显示（遇到的坑）

解决webview 第二次调用loadUrl页面不刷新的问题

08-19

在 Android 开发中，使用 WebView 加载网页时，经常会遇到一个问题，即第二次调用 loadUrl 后，页面不刷新的问题。这篇文章将详细介绍解决这个问题的方法，并提供了一些补充知识，帮助读者更好地理解 WebView 的使用...

解决VUE-Router 同一页面第二次进入不刷新的问题

10-15

在开发Vue.js应用时，...通过上述方法，我们可以解决Vue-Router中同一页面第二次进入不刷新的问题，并且可以有效处理页面刷新时的参数丢失问题，保证用户的操作体验。希望这些解决方案对你在实际开发过程中有所帮助。

SUI中的坑：打开html页面，js不自动加载，自由刷新后才会加载

qq_33371372的博客

09-20

3568

最近写的一个ssm项目中使用到了sui框架，到页面都写好之后发现每次跳转过去js代码都不会去加载，只有点击刷新之后才执行js代码，chrome控制台查看后发现，每次跳转之后都只有network发生了变化，但也只是加载了html页面，js并没有加载，source更是没有任何变化，抓狂在论坛和百度无果之后，在github上发现有人说是SUI的bug，路由问题, 在class中添加in extern...

js效果需要刷新页面才生效

u014062332的专栏

06-27

7379

今天在一个页面中用到了jquery控制页面显示发现在首次进入页面时js没有生效，而需要重新刷新一次页面才会有效果

javascript实现页面加载,预读取完数据后再显示页面

xylike816的专栏

06-19

988

/loading.html/-->script> document.onreadystatechange=function(){ if(document.readyState=="complete"){ document.getElementById(loading_div).style.display=none; } } scrip

html跳转到新html不执行js，刷新后才执行

胥亮的专栏

10-28

2106

最近遇到问题“html跳转到新html不执行调用的js，刷新后才执行”，qing

<a>标签通过href跳转后新界面引用的CSS和JS文件需要刷新界面之后才可以加载问题解决

qq_39602928的博客

02-29

2144

最近在进行前端调试时发现使用<a>标签和href属性直接进行网页跳转时 <li><a href="./index.html"></li> 跳转后的新界面的CSS样式和JS文件都失效了，调试时发现页面跳转后<head>标签内得内容和<script>标签里面的内容里面的内容都没有被重新加载，查资料发现好像是因为<a>标...

页面首次进入时可能会有白屏的问题

czlj1998的博客

10-01

2535

如果页面中的脚本和样式表是通过同步加载的方式加载的，当某个脚本或样式表下载和执行时，会阻塞后续资源的加载和渲染，导致白屏。：当页面中的资源（如CSS、JavaScript、图片等）过多或者过大时，浏览器需要更长的时间来加载这些资源，导致页面出现白屏。：如果页面中的JavaScript代码在页面加载过程中执行的时间过长，会导致页面无法正常渲染，出现白屏。针对这些原因，可以采取相应的解决方案，例如：优化资源加载、异步加载脚本和样式表、优化JavaScript代码、合理设置缓存策略等，以减少白屏问题的发生。

IE浏览器打开页面js失效开启F12后刷新正常

偏执

07-22

406

不排除后台java headers由上一页面指定而失效例如jsp页面什么的一般问题都能解决。排查了下，主要是文档模式作怪，此处由上到下，改为默认打开页面为ie8文档模式渲染，亲测生效。ie8下不能识别js console属性所以写完代码后记得注释或者删除。遇到这种兼容问题有时确实让人头大慢慢来解决都不是什么问题。更新：meta放在link和script之前，jsp的话要把。现在双核浏览器也多如果使用兼容模式的话也是这样。不懂的可以去百度去了解。

WebSocket使用@OnMessage注解无法收到消息的坑与解决方法

BHSZZY的博客

01-07

2万+

一、前言最近新写了一个Java WebSocket后台，用来和前端通信；本来前端通过js是可以成功建立WebSocket连接的，但是前端使用WebSocket发给后台的消息，后台却怎么也收不到。以下是问题描述与解决办法。二、问题描述 1.前端建立WebSocket连接的关键代码样例如下： var msg="abc123"; //var imUrl="wss://10.123.123.123:9999/api/im"; var imUrl="ws://10.123.123.123:9999/api/im

vue中使用swiper页面不滑动，swiper中的js不生效的问题解决

吴文静的博客

05-19

3779

如何在vue中使用swiper插件 1、前言今天用vue3.0写项目的时候，想要用swiper插件做轮播。其实之前我也用过，也遇到这个问题，但是我记性不好，就把这个关键的问题又忘记啦，今天又遇到这个坑，所以打算记录一下，以免自己以后又忘记。我们在vue中使用swiper的时候，一定要用setTimeout来初始化swiper组件。这也是我们经常遇到的一个坑。如果用的轮播比较简单，其实elementUI里面自带的走马灯也是不错的选择。 2 、安装方法 // 使用指令安装 npm i swiper@3.4.

使用Hexo部署静态网站或博客到github(gitee)时css或js样式无法显示的问题原因以及解决方案

DoublePeach的博客

08-12

6129

既然不是语法的问题那就是路径的问题了，可能是路径问题导致的css或js文件未导入或未加载到，我就开始检查我的hexo里的_config.yml文件。url 是github的仓库地址，无误，但root是要填仓库所在的根路径，这里却填成了仓库路径，导致路径找不到，所以样式无法加载，这样把错排出来后面就简单多了！我第一反应是这些静态文件未编译或者语法有问题，但找半天后并没有发现语法上有什么问题。最后一定记得先把github仓库刷新一下，然后再访问目标网页地址，这时就会发现样式都出现了，问题解决！...

第一次打开页面报错，刷新之后就不报了

最新发布

09-12

你描述的现象是： > **“第一次打开页面报错，刷新之后就不报了。”** --- ## ✅ 可能原因分析这种现象通常与**页面首次加载时的异步请求失败、资源加载顺序、缓存机制、代理配置、或服务启动延迟**有关。 --- ### ❗ 常见原因及解决方案 --- ### ✅ 1. **异步请求失败（如 Axios 请求）** #### 现象： - 页面首次加载时调用了接口（如 `/api/user`）获取数据。 - 如果接口尚未准备好（如后端服务刚启动，还未完全加载），请求会失败。 - 刷新后服务已加载完成，接口正常返回数据。 #### 解决方案： - **前端处理错误重试机制（推荐）** ```js async function fetchDataWithRetry(url, retries = 3, delay = 1000) { try { const res = await axios.get(url); return res.data; } catch (error) { if (retries > 0) { console.log(`请求失败，${retries} 次重试中...`); await new Promise(resolve => setTimeout(resolve, delay)); return fetchDataWithRetry(url, retries - 1, delay); } else { throw new Error("请求失败，已达最大重试次数"); } } } // 使用示例 fetchDataWithRetry('/api/user') .then(data => console.log(data)) .catch(err => console.error(err)); ``` --- ### ✅ 2. **后端服务未完全启动** #### 现象： - 开发环境中，前端服务和后端服务同时启动。 - 前端页面加载时，后端接口尚未启动完成，导致第一次请求失败。 - 刷新后后端已启动完成，接口正常。 #### 解决方案： - **手动延迟前端请求**（调试时可用） ```js mounted() { setTimeout(() => { axios.get('/api/user') .then(res => console.log(res.data)) .catch(err => console.error(err)); }, 3000); // 延迟3秒再请求 } ``` - **使用健康检查接口（推荐）** ```js async function waitForBackend() { let retries = 10; while (retries > 0) { try { await axios.get('/api/health-check'); return; } catch (err) { retries--; await new Promise(resolve => setTimeout(resolve, 1000)); } } throw new Error('后端服务启动超时'); } // 使用 async mounted() { await waitForBackend(); axios.get('/api/user') .then(res => console.log(res.data)); } ``` --- ### ✅ 3. **前端代理未及时生效** #### 现象： - 第一次请求时，代理还未完全建立连接。 - 刷新后代理已建立，请求正常。 #### 解决方案： - 确保 `vue.config.js` 或 `vite.config.js` 中代理配置正确。 ```js // vue.config.js module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true, pathRewrite: { '^/api': '' } } } } } ``` --- ### ✅ 4. **浏览器缓存问题** #### 现象： - 首次加载资源失败，浏览器缓存记录为失败。 - 刷新后资源加载正常，但缓存未更新。 #### 解决方案： - 强制刷新页面：`Ctrl + F5` 或 `Cmd + Shift + R` - 清除浏览器缓存 - 使用无痕模式测试 --- ### ✅ 5. **WebSocket 或长连接未建立完成** #### 现象： - 页面使用了 WebSocket 或 SSE（Server-Sent Events） - 首次加载时连接未建立成功，导致部分数据请求失败 #### 解决方案： - 在连接建立后再进行请求： ```js const socket = new WebSocket('ws://localhost:8080/ws'); socket.addEventListener('open', () => { console.log('WebSocket 连接已建立'); socket.send('请求数据'); }); ``` --- ## ✅ 总结：你需要检查的 3 个关键点 | 检查项 | 是否完成 | |--------|----------| | ✅ 后端服务是否首次加载慢？ | ❌/✅ | | ✅ 前端请求是否做了失败重试？ | ❌/✅ | | ✅ 代理是否配置正确？ | ❌/✅ | --- ##