精华内容
下载资源
问答
  • iframe的src发生改变,才会刷新iframe里面的内容. 所以虽然我代码的url对应的页面有变化了,可是url一直不变,也就是iframe的src一直没变.所以不刷新内容; 解决办法 原因找到了,解决就非常容易了.想任何一种...
  • 一、需求  &...如果是location.href=''跳转到列表页的,则可以实现正常刷新。但如果是点击浏览器的后退按钮呢?       大...

    一、需求

          比如我们要从列表页进入到详情页,在详情页修改完数据之后,此时若是返回列表页,页面展示的内容也应该和详情页修改之后的内容保持一致才是。如果是location.href=''跳转到列表页的,则可以实现正常刷新。但如果是点击浏览器的后退按钮呢?

          大家都知道,浏览器有自己的缓存机制,我们的网页是被浏览器缓存了。如果想要后退刷新的按钮的话,建议是采用js的手段去控制。

    二、寻找方案

    1、网上百度

          大家一百度就会发现,网上都是说的在html顶部加上不能缓存的meta标签,或者使用input隐藏域等,我在本地试了下没一个成功的。可能是我的使用方式不对吧。

    2、采用cookie策略

          既然以上方法都不行,那么能不能从cookie入手呢。根据我们的需求,我们又怎么才能在每次加载页面的时候,都根据cookie刷新页面呢?

    首先是了解一下jquery的一个cookie插件:
    jquery-cookie中文文档

    了解完大致操作之后,我们可以设想下:

    (1)如果我们每次进入页面都获取一个未知的cookie值,那么返回值是null。
    (2)我们给页面的cookie赋值一个数字。
    (3)然后我们下次进入页面就能获取这个cookie的值。
    (4)此时我们可以重新给这个cookie赋值为null(方便每次进页面,cookie都为null,实现每次都能刷新页面)
    (5)使用`location.reload()`方法刷新页面即可
    

    3、代码部分

    <script src=" https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
        <script>
         //这里的test可以是任意的值,反正我们是获取不到这个值的。打印一下,发现获取不到的cookie为null
          $first=$.cookie('test');   、
          if(!$first||$first=='null'||$first==null){
    //第一次进页面,肯定是没有cookie的,所以这里设置cookie的值为1,时间为7天
            $.cookie('test','1',{ expires: 7 });
          }else{
    //然后等下次回到页面,肯定会取到cookie的值,然后我们就反其道而行,给cookie赋值为null,同时刷新页面
            $.cookie('test',null);
            location.reload(true);
          }
        </script>

    (1)如果觉得引入外部JS会影响速度,那么就存放在本地最好
    (2)这段代码建议放在的最下面,这样页面体验好。如果放到head的话,页面会出现短暂的白屏刷新

          然后我们试验这段代码,就会发现真的实现了我们的需求。每次点击浏览器后退按钮,我们的列表页都会刷新,而且刷新的体验会很好,页面加载完之后只需要改变dom的值即可。

    参考链接:
    https://blog.csdn.net/xiawu1990/article/details/52055466

    end

    展开全文
  • 这几天开发中遇到了一个问题,遇到video动态渲染数据,数据已经更新,但是并没有渲染出来,后来无奈百度了一下vue的组件强制刷新: 方案一 当数据变更后,通过watch 监听,先去销毁当前的组件,然后再重现渲染。使用 ...

    这几天开发中遇到了一个问题,遇到video动态渲染数据,数据已经更新,但是并没有渲染出来,后来无奈百度了一下vue的组件强制刷新:

    方案一

    当数据变更后,通过watch 监听,先去销毁当前的组件,然后再重现渲染。使用 v-if 可以解决这个问题

    <template>
       <video
              v-if="reFresh"
              id="media"
              style="object-fit:fill;"
              class="videosrc"
              ref="videoPlay"
              controls
              :poster="poster"
              preload="metadata"
              x5-playsinline="true"
              playsinline="true"
              webkit-playsinline="true"
              :src="videoSrc"
            ></video>
    </template>
     
    <script>
       export default{
           data(){
              return {
                    reFresh:true,
                }
           },
           watch:{
                 menuTree(){
     
                      this.reFresh= false
                      this.$nextTick(()=>{
                        
                        this.reFresh = true
                    })
                }
           }
    }
    </script>
    

    **

    方案二

    **

    通过vue key 实现,原理官方文档。所以当key 值变更时,会自动的重新渲染。

    <template>
       <video
              id="media"
              style="object-fit:fill;"
              class="videosrc"
              ref="videoPlay"
              controls
              :poster="poster"
              preload="metadata"
              x5-playsinline="true"
              playsinline="true"
              webkit-playsinline="true"
              :src="videoSrc"
              :key='menuKey'
            ></video>
    </template>
     
    <script>
       export default{
           data(){
              return {
                    menuKey:1
                }
           },
           watch:{
                 menuTree(){
     
                    ++this.menuKey
                }
           }
    }
    </script>
    
    展开全文
  • gulp实现监听改变自动刷新页面

    千次阅读 2017-10-27 11:15:51
    gulp的安装和一些基本api我之前已经有文章介绍了,刚好最好在研究将gulp+webpack结合起来,重新回顾了下gulp的一些操作,觉得值得分享 ... gulp-htmlmin:压缩html,可以压缩页面javascript、css,

    gulp的安装和一些基本api我之前已经有文章介绍了,刚好最好在研究将gulp+webpack结合起来,重新回顾了下gulp的一些操作,觉得值得分享

    • gulp-htmlmin
    • gulp-rev-append
    • gulp-connect
    • gulp-watch
    • gulp-plumber
    通俗解释(解释错误可以指出):

    gulp-htmlmin:压缩html,可以压缩页面javascript、css,去除页面空格、注释,删除多余属性等操作

    gulp-rev-append:使用gulp-rev-append给页面的引用添加版本号,清除页面引用缓存

    gulp-connect:在本地开启一个websocket服务,使用liveReload实现实时更新

    gulp-watch:监听文件的变化,配合connect实现服务自动刷新

    gulp-plumber:实时更新错误不会导致终端gulp运行开启的服务断开

    gulp-htmlmin

    gulpfile.js代码:

    gulp.task('buildHtmlmin', function () {
        var options = {
            removeComments: true,//清除HTML注释
            collapseWhitespace: true,//压缩HTML
            collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
            removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
            removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
            removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
            minifyJS: true,//压缩页面JS
            minifyCSS: true//压缩页面CSS
        };
        gulp.src('*.html')
            .pipe(htmlmin(options))
            .pipe(gulp.dest('dist/html'));
    })

    编译前:

    这里写图片描述

    这里省略了gulp-concat,和一些编译js文件,运动gulp:

    这里写图片描述

    编译后:
    这里写图片描述

    gulp-rev-append

    gulpfile.js代码:

    var rev = require('gulp-rev-append')
    gulp.task('buildRev', function () {
        gulp.src('index.html')
            .pipe(rev())
            .pipe(gulp.dest('dist/html'))
    })

    gulp-rev-append 插件将通过正则(?:href|src)=”(.)[?]rev=(.)[“]查找并给指定链接填加版本号(默认根据文件MD5生成,因此文件未发生改变,此版本号将不会变)

    这里写图片描述

    这里写图片描述

    最后我将gulp-connect,gulp-watch,gulp-plumber结合在一起做gulp自动监听服务刷新
    gulpfile.js

    gulp.task('ant_js', function(){
        gulp.src('src/js/*.js')
            .pipe(plumber({
                errorHandler: function(error) {
                    this.error('end')
                }
            }))
            .pipe(gulp.dest('dist/js'))
            .pipe(connect.reload())
    })
    gulp.task('ant_html', function(){
        gulp.src('index.html')
            .pipe(rev())
            .pipe(gulp.dest('dist/html'))
            .pipe(connect.reload())
    })
    gulp.task('ant_connect', function() {
        connect.server({
            livereload: true,
            port: 8888
        })
    })
    gulp.task('ant_watch', function() {
        gulp.watch('*.html', ['html'])
        gulp.watch('src/js/*.js', ['js'])
    })
    gulp.task('default', [ 'ant_js', 'ant_html','ant_watch', 'ant_connect'])

    注意:this.emit(‘end’),之前看了很多博文里都没有这一步的处理,但是我没有这一步处理的时候虽然watch进程不会挂了,但是scss文件发 生变化时却不会自动编译了.

    这里写图片描述

    这里写图片描述

    有兴趣的可以自己去网上看看相关的API,这里只做简单的代码和demo演示

    展开全文
  • JavaScript刷新当前页面的五种方式

    千次阅读 2019-02-25 11:19:03
    js刷新当前页面的5种方式 1、reload: reload 方法,该方法强迫浏览器刷新当前页面。 语法:location.reload([bForceGet])  参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取当前页。true, 则以 ...

    转自:原文地址

    js刷新当前页面的5种方式

    1、reload:

    reload 方法,该方法强迫浏览器刷新当前页面。
    语法:location.reload([bForceGet])   
    参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取当前页。true, 则以 GET 方式,从服务端取最新的页面, 相当于客户端点击 F5("刷新")

    reload() 方法用于重新加载当前文档。
    如果该方法没有规定参数,或者参数是 false,它就会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已改变。如果文档已改变,reload() 会再次下载该文档。如果文档未改变,则该方法将从缓存中装载文档。这与用户单击浏览器的刷新按钮的效果是完全一样的。

    2、replace 方法:

    该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,你不能通过“前进”和“后退”来访问已经被替换的URL。
    语法: location.replace(URL)   
    通常使用: location.reload() 或者是 history.go(0) 来做。
    此方法类似客户端点F5刷新页面,所以页面method="post"时,会出现"网页过期"的提示。
    因为Session的安全保护机制。
    当调用 location.reload() 方法时, aspx页面此时在服务端内存里已经存在, 因此必定是 IsPostback 的。
    如果有这种应用: 需要重新加载该页面,也就是说期望页面能够在服务端重新被创建,期望是 Not IsPostback 的。
    这里,location.replace() 就可以完成此任务。被replace的页面每次都在服务端重新生成。
    代码: location.replace(location.href);

    返回并刷新页面:

    location.replace(document.referrer);
    document.referrer //前一个页面的URL

    不要用 history.go(-1),或 history.back();来返回并刷新页面,这两种方法不会刷新页面。
    附:

    Javascript刷新页面的几种方法:

    1. history.go(0) 
    2. location.reload() 
    3. location=location 
    4. location.assign(location) 
    5. document.execCommand('Refresh') 
    6. window.navigate(location) 
    7. location.replace(location) 
    8. document.URL=location.href

    自动刷新页面的方法:
    1、页面自动刷新:把如下代码加入<head>区域中,代码如下:

    <meta http-equiv="refresh" content="20">

    其中20指每隔20秒刷新一次页面;

    2、页面自动跳转:把如下代码加入<head>区域中,代码如下:

    <meta http-equiv="refresh" content="20;url=http://www.jb51.net">

    其中20指隔20秒后跳转到http://www.jb51.net页面
    3、页面自动刷新js版,代码如下:

    <script language="JavaScript">
        function myrefresh(){
           window.location.reload();
        }
        setTimeout('myrefresh()',1000); //指定1秒刷新一次
    </script>

    4、JS刷新框架的脚本语句,代码如下:

    //刷新包含该框架的页面用   
    <script language=JavaScript>
       parent.location.reload();
    </script>
    
    //子窗口刷新父窗口
    <script language=JavaScript>
        self.opener.location.reload();
    </script>
    ( 或 <a href="javascript:opener.location.reload()">刷新</a>   )
    
    //刷新另一个框架的页面用   
    <script language=JavaScript>
       parent.另一FrameID.location.reload();
    </script>

    5、如果想关闭窗口时刷新或想开窗时刷新,在<body>中调用以下语句即可,代码如下:

    <body onload="opener.location.reload()"> 开窗时刷新
    <body onUnload="opener.location.reload()"> 关闭时刷新
    <script language="javascript">
        window.opener.document.location.reload()
    </script>

    一、先来看一个简单的例子: 

    下面以三个页面分别命名为frame.html、top.html、bottom.html为例来具体说明如何做。 
    frame.html 由上(top.html)下(bottom.html)两个页面组成,代码如下: 

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
    <HTML> 
        <HEAD> 
            <TITLE> frame </TITLE> 
        </HEAD> 
        <frameset rows="50%,50%"> 
            <frame name=top src="top.html"> 
            <frame name=bottom src="bottom.html"> 
        </frameset> 
    </HTML> 

    现在假设top.html (即上面的页面) 有七个button来实现对bottom.html (即下面的页面) 的刷新,可以用以下七种语句,哪个好用自己看着办了。
    top.html 页面的代码如下:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
    <HTML> 
    <HEAD> 
    <TITLE> top.html </TITLE> 
    </HEAD> 
    <BODY> 
    <input type=button value="刷新1" onclick="window.parent.frames[1].location.reload()"><br>
    <input type=button value="刷新2" onclick="window.parent.frames.bottom.location.reload()"><br>
    <input type=button value="刷新3" onclick="window.parent.frames['bottom'].location.reload()"><br>
    <input type=button value="刷新4" onclick="window.parent.frames.item(1).location.reload()"><br>
    <input type=button value="刷新5" onclick="window.parent.frames.item('bottom').location.reload()"><br>
    <input type=button value="刷新6" onclick="window.parent.bottom.location.reload()"><br>
    <input type=button value="刷新7" onclick="window.parent['bottom'].location.reload()"><br>
    </BODY> 
    </HTML> 

    下面是bottom.html页面源代码,为了证明下方页面的确被刷新了,在装载完页面弹出一个对话框,代码如下:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
    <HTML> 
        <HEAD> 
            <TITLE> bottom.html </TITLE> 
        </HEAD> 
        <BODY onload="alert('我被加载了!')"> 
            <h1>This is the content in bottom.html.</h1> 
        </BODY> 
    </HTML> 

    解释一下: 

    1. window指代的是当前页面,例如对于此例它指的是top.html页面。 
    2. parent指的是当前页面的父页面,也就是包含它的框架页面。例如对于此例它指的是framedemo.html。 
    3. frames是window对象,是一个数组。代表着该框架内所有子页面。 
    4. item是方法。返回数组里面的元素。 
    5. 如果子页面也是个框架页面,里面还是其它的子页面,那么上面的有些方法可能不行。 

    附: 
    Javascript刷新页面的几种方法: 

    1. history.go(0) 
    2. location.reload() 
    3. location=location 
    4. location.assign(location) 
    5. document.execCommand('Refresh') 
    6. window.navigate(location) 
    7. location.replace(location) 
    8. document.URL=location.href 

    二、自动刷新页面 
    1.页面自动刷新:把如下代码加入<head>区域中 

    <meta http-equiv="refresh" content="20"> 

    其中20指每隔20秒刷新一次页面. 
    2.页面自动跳转:把如下代码加入<head>区域中 

    <meta http-equiv="refresh" content="20;url=http://www.jb51.net"> 

    其中20指隔20秒后跳转到http://www.jb51.net页面 

    三、java在写Servler,Action等程序时,要操作返回页面的话(如谈出了窗口,操作完成以后,关闭当前页面,刷新父页面)代码如下:

    1. PrintWriter out = response.getWriter(); 
    2. out.write("<script type=\"text/javascript\">"); 
    3. 子窗口刷新父窗口 
    4. out.write("self.opener.location.reload();"); 
    5. //关闭窗口 
    6. out.write("window.opener=null;"); 
    7. out.write("window.close();"); 
    8. out.write("</script>"); 

    四、JS刷新框架的脚本语句 
    1.如何刷新包含该框架的页面用,代码如下:

    <script language=JavaScript> 
        parent.location.reload(); 
    </script> 

    2.子窗口刷新父窗口,代码如下:

    <script language=JavaScript> 
        self.opener.location.reload(); 
    </script> 

    3.如何刷新另一个框架的页面用 (上面的实例以说明了),代码如下:

    语句1. window.parent.frames[1].location.reload(); 
    语句2. window.parent.frames.bottom.location.reload(); 
    语句3. window.parent.frames["bottom"].location.reload(); 
    语句4. window.parent.frames.item(1).location.reload(); 
    语句5. window.parent.frames.item('bottom').location.reload(); 
    语句6. window.parent.bottom.location.reload(); 
    语句7. window.parent['bottom'].location.reload(); 

    4.如果想关闭窗口时刷新或者想开窗时刷新的话,在<body>中调用以下语句即可。 

    <body οnlοad="opener.location.reload()"> 
    开窗时刷新 
    <body onUnload="opener.location.reload()"> 
    关闭时刷新 

    代码如下:

    <script language="javascript"> 
        window.opener.document.location.reload() 
    </script> 

    巴拉巴拉:

    ==主页传送门==

    展开全文
  • 这里有两种情况: 1. 你更改的是图片img的src 2. 你更改的是视频video的src...当点击某一按钮的时候,把图片域中的图片改变一下 <img id="randimg" src="/servlet/CreateValidateNum" width="60" height="20" /> <sp
  • 网上有一些方法是用的页面加一个按钮,通过jQuery或者JavaScript把原来的embed删除,从新拼一个代码串塞到原来的放置embed的标签内。 页面加载的时候自动改变(片段): $(function(){var srcUrl=...
  • javascript修改IMG标签的SRC刷新问题

    千次阅读 2012-06-01 10:17:26
    javascript修改IMG标签的SRC刷新问题   1.当点击某一按钮的时候,把图片域中的图片改变一下    看不清    function refresh()  {  document.getElementById(randimg).src="/servlet/...
  • webpack-dev-server不能自动刷新问题

    千次阅读 2017-11-01 22:36:25
    使用webpack-dev-server中遇到不能浏览器无法自动刷新的问题;寻找多方答案后明白了一些;下面有一些需要注意的点:1.webpack-dev-server并不能读取你的webpack.config.js的配置output!!你在webpack.config.js里面...
  • npm script 的文件监听和自动刷新

    千次阅读 2019-06-08 03:18:01
    自动刷新,意思就是改动文件保存后,页面自动刷新,减少日常开发的操作。 代码检查的监听和自动化 代码检查工具 stylelint、eslint、jsonlint 这些对 watch 支持很弱,所以就需要引入工具包 onchange 安装命令依赖包...
  • src="/servlet/CreateValidateNum" width="60" height="20" /&gt; &lt;span style="cursor:hand" onclick="reflush();return false;&qu
  • js实现iframe的自动刷新

    万次阅读 2011-01-20 23:40:00
    简单框架<iframe src="http://" width="100%" id="ifrmid" height="500"></iframe>’js刷新iframe <script language="javascript"> one=function() { ifrmid.window.location.reload()...
  • 1.1、说明:src方法是指定需要处理的源文件的路径,gulp借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,gulp.src返回当前文件流至可用插件; 1.2、globs:需要处理的源文件匹配符路径...
  • 如何修改页面后,页面自动刷新

    千次阅读 2019-05-24 08:04:55
    如何在修改页面后,让页面自动刷新? 答案是使用 socket.io 。 socket.io 是一个 WebSocket 库,包括了客户端的 js 和服务器端的 nodejs ,它的目标是构建可以在不同浏览器和移动设备上使用的实时应用。它会自动根据...
  • 这里我主要实现了less编译、css补全浏览器前缀、js压缩、浏览器自动刷新几项常用的功能。 第一步、全局安装 gulp npm install gulp -g  本地安装 npm install --save-dev gulp 第二部、新建gu...
  • 1)js代码: function generateImageCode() { // 1. 生成一个编号 // 严格一点的使用uuid保证编号唯一, 不是很严谨的情况下,也可以使用时间戳 imageCodeId = generateUUID(); ...
  • js刷新当前页面的5种方式

    千次阅读 2019-09-05 16:14:42
    reload 方法,该方法强迫浏览器刷新当前页面。 语法:location.reload([bForceGet]) 参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取当前页。true, 则以 GET 方式,从服务端取最新的页面, 相当于...
  • BUG描述 在做一个头像上传功能 ...img src=\"/user/portrait/"%&gt;&lt;jsp:getProperty name="user" property="portrait"/&gt;&lt;%=".jpg\&q
  • 如何用脚本更改Iframe的src刷新

    千次阅读 2012-03-08 16:10:05
    语句为:frm1.location.href='2.asp';这个语句有刷新功能。
  • javascript修改IMG标签的SRC

    千次阅读 2014-03-28 14:58:47
    本文转自:... 1.当点击某一按钮的时候,把图片域中的图片改变一下    看不清    function reflush()  {  document.getElementById(randimg
  • vue 定时刷新改变输出内容

    千次阅读 2018-09-12 15:06:22
    &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&...script src="./vue.js"&gt;&lt;/script&g
  • |-- pluginConfig.js // gulp 插件配置项 |-- dev // 编译后目录 |-- build // 生产版本 |-- .eslintrc // eslint规则 |-- .eslintignore // eslint忽略文件 |-- .gitignore // git提交忽略文件 |-- gulpfile...
  • grunt自动刷新liveload

    2017-04-07 14:25:40
    需要的grunt插件 grunt-contrib-watch ...* 自动搭建静态文件服务器,不需在自己电脑上搭建Web服务器。 * 不需要浏览器插件的支持(不现定于某个浏览器)。 * 不需要给网页手动添加livereload.js。 缺点:
  • <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/html"> <head> <meta charset="UTF-8"> <title>test</title>...script src="js/jquery-3.4.1....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 28,113
精华内容 11,245
关键字:

自动刷新通过js改变src值