精华内容
下载资源
问答
  • 主要介绍了Vue中对iframe实现keep alive无刷新的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vue 路由嵌入iframe 刷新保留当前页面

    千次阅读 2020-04-20 14:35:23
    最近在研发过程中,遇到了一个优化,vue项目嵌套在另外一个vue项目的iframe中,外层vueiframe刷新iframe中的vue项目希望可以停留在你当前操作的页面,而不是刷回到一开始的iframe里src路径 当开始听到这个优化...

    最近在研发过程中,遇到了一个优化,vue项目嵌套在另外一个vue项目的iframe中,外层vue的iframe刷新,iframe中的vue项目希望可以停留在你当前操作的页面,而不是刷回到一开始的iframe里src路径

    当开始听到这个优化点的时候,一上来有点懵,初步想法是存在localstroage里面,每次页面刷新的时候,去缓存里面取值,然后在push

    但是这样操作有问题,localstroage关闭浏览器,不手动清除,数据还会存在,而且,web页面判断浏览器刷新的动作,用网上介绍的方法都会有各种各样的问题,所以,后来利用了vue的全局钩子以及watch监听路由信息做了最后的处理。

    下面是代码实现:

     app.vue

    app.vue
      mounted () {
            window.addEventListener('beforeunload', e => {
                 sessionStorage.setItem('beforeunload', 1);
            });
                // 监听页面刷新
             if(sessionStorage.getItem('beforeunload') == 1){
                    let name = sessionStorage.getItem("routerName");
                    if (name) {
                        this.$nextTick(function() {
                            this.$router.push({ path: name });
                        });
                    }
                }
            },
            watch: {
                 $route(to,from){
                    if(from.name == null){
                         sessionStorage.removeItem('beforeunload');
                    }
                }
            },
        

    路由index.js

    router/index.js
    router.beforeEach((to, from, next) => {
        if (from.name != null)
        sessionStorage.setItem("routerName", to.fullPath);
        next(); 
    });

    最终,当前vue项目的iframe对应刷新的时候,路由保持当前页面,当外层vue项目tab切换的时候,路由又会重置到最原始的嵌入页面。

    如果你有更好的实现方式,欢迎与我多多交流。

    展开全文
  • 主要获取iframe里面的文档对象,就可以任意操作iframe的内容 //contentDocument 属性能够以 HTML 对象来返回 iframe 中的文档。可以通过所有标准的 DOM 方法来处理被返回的对象。 //querySelector 选择器 当然也可用...

    主要获取iframe里面的文档对象,就可以任意操作iframe的内容

    //contentDocument 属性能够以 HTML 对象来返回 iframe 中的文档。可以通过所有标准的 DOM 方法来处理被返回的对象。
    //querySelector 选择器 当然也可用 id 或者class 等选着器代替
    document.querySelector('iframe').contentWindow.location.reload();
    
    展开全文
  • Vue如何在iframe刷新\关闭整个页面

    千次阅读 2020-08-29 15:40:21
    if(res.success){ parent.location.reload(); //刷新整个当前页 } function loadUrl(url) { if (window != top){ top.location.href = url; return; } window.location.href = url; }

     vue:

    <!--内嵌页面-->
    <div class="read_heton" v-if="packOff">
        <iframe src="https://www.baidu.com"
                frameborder="0"
                width="100%"
                height="100%">
        </iframe>
    </div>
    
    直接设置:
    this.packOff = false;
    
    if(res.success){
              parent.location.reload(); //刷新整个当前页
    }
    
    window.location.href  location.href 本页面跳转
    parent.location.href  上一层页面跳转
    top.location.href 最外层页面跳转

     

    function loadUrl(url) {
            if (window != top){
                top.location.href = url;
                return;
            }
            window.location.href = url;
        }

    设置父页面url跳转

    top.location = 'path'
    or 
    top.location.href = 'path'

    iframe里面 按钮点击 关闭当前iframe

    //父页面有iframe的
    <body>
        <iframe id="main" src="test.htm"  frameborder="no" ></iframe>
    </body>
    
    iframe页面:
    <div class="wrap" id="btn"> 
            点击隐藏
    </div> 
    <script type="text/javascript">
      document.getElementById("btn").onclick = function(){
        window.parent.document.getElementById("main").style.display="none";
      }
     </script>

     

    展开全文
  • vue项目中一个模板组件,不同iframe的src地址,对应不同的路由,不同标签页,且切换标签页不重载。这种客户的要求是特例在网上没有,所以纯自行手码。由于项目在vuex保存了标签页,所以初次进入该组件时,调用了一次...
  • 然后把不同的http的页面的url传递进来进行切换,但是这样不满足第二条,我们发现只要切换了vue的路由,然后再切回http的页面,iframe中的src属性的页面就会从新刷新,没有办法保留住东西,于是就有了下面的实现思路 ...
  • vue页面tab切换,替换原来的iframe实现,利用vue的router-view和keep-alive实现
  • vue 中 elementui tabs 下的iframe 刷新

    千次阅读 2018-12-18 15:56:38
    1,tabs 渲染前给每个iframe绑定ref...2、通过当前选中标签的值获取iframe ,this.$refs[value]获取dom 这是一个数组 ,执行下面代码实现当前选中标签下的iframe刷新 this.$refs[value][0].contentWindow.location....

    1,tabs 渲染前给每个iframe绑定ref,ref的值要和Tabs Attributes的value值一致 (value是当前选中标签的值)

    2、通过当前选中标签的值获取iframe ,this.$refs[value]获取dom  这是一个数组 ,执行下面代码实现当前选中标签下的iframe刷新

    this.$refs[value][0].contentWindow.location.reload()

     

    展开全文
  • 刷新iframe的方法

    千次阅读 2020-10-22 09:30:08
    JS/jQuery 刷新 iframe 的方法 1、JavaScript 刷新 iframe 可以使用以下方法: document.getElementById('some_frame_id').contentWindow.location.reload(); 实例: <iframe id="myframe" width="100%" ...
  • 主要介绍了vue中解决拖拽改变存在iframe的div大小时卡顿问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • document.getElementById(iframe的id).contentWindow.location.reload(true); 在更改iframe src属性值之前加上这一句即可。
  • 本事增加了路由缓存,我想切换页面的时候iframe里面的数据不变
  • 说到Vue的简单、便捷、高效,谁用谁喜欢,自然企业应用也来玩一把,三大经典组件:树控件,网格控件,选项卡控件;...2.切换tab, iframe-view 保持原界面不刷新,与keep-alive效果等同; 3.关闭t...
  • https://gitee.com/chkhk/vue-element-admin/commit/9f1fcd03f92acf32d542fa322140a4e8feb724bb 亲测太好用了,别看他改的多,但是好用啊
  • 网上看到一些使用iframe切换页面保留用户操作记录的方法,大概就是在iframe上加一个判断。按照这个做法,并没有得到预期的效果,想问一下是我用的不对,还是有其他方法。一下是我的代码: ``` @contextmenu...
  • 我们去处理此类问题,通常马上就会想到去使用vue框架中自带的keep-alive组件,所以一开始我也是去使用了keep-alive,但是发现没有达到预期效果,后面通过研究和查阅资料发现,在vue项目中加入了含有iframe的页面,在...
  • 正常情况下,当你向服务器发送数据的时候,你的浏览器将会打开ACTION页面,并且不会重回到当前页面。但是有的时候,我们因为各种各样的要求,而不希望浏览器在提交数据的时候去刷新当前的页面或者转向到新的页面
  • 利用本地存储,解决问题Vue 刷新后用户名消失,store数据丢失
  • vue 实现iframe跨域通信

    2020-11-11 10:51:21
    window.addEventListener('message', (event) => { let data = event.data console.log('我是父页面传递过来的') console.log(data) }) } 我刚开始做的时候陷入了一个思维模式,点击父页面后老是想刷新子页面,觉得子...
  • 主要介绍了vue数据更新UI不刷新显示的解决办法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Vueiframe跨域调用

    2021-07-11 19:17:18
    // 在iframe子页面引入该js window.addEventListener ('message', function(event) { /** * 可以在这个地方调用HTML */ console.log('调用HTML') if (event&&event.data){ console.log(event.data) ...
  • vue 中嵌入iframe页面

    千次阅读 2020-04-24 18:36:45
    使用的是vue-element-admin。 需求 项目需求是在点击左边侧边栏的时候判断如果是...新建了iframe.vue文件,里面套iframe标签,通过地址的参数不同,跳转不同的iframe页面,但是在做切换时,会导致iframe页面重载,利...
  • iframe 跨域解决方法

    2019-04-10 01:04:03
    NULL 博文链接:https://hqlly.iteye.com/blog/1662337
  • 背景Vue 应用中,需要使用 el-dialog 弹出一个 iframe 页面,该页面来源于其他项目,这就要解决 Vue 父页面和 iframe 子页面的两个通信问题:Vue 父页面向 iframe 子页面传递初始化数据子页面的关闭按钮,需要通知父...
  • 部署 vue 单页面刷新路由404问题解决

    千次阅读 2019-06-14 09:40:33
    vue-router默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。 如果不想要很丑的 hash,我们可以用路由的history 模式,这种模式充分利用hi...
  • 如何强制iframe刷新

    千次阅读 2017-06-09 09:58:24
    iframe强制刷新(页面不刷新iframe局部刷新
  • vue iframe高度自适应 实用

    千次阅读 2021-02-20 11:26:02
    iframevue的,在使用过程中高度根据数据实时变化,不好设置iframe的高度值。试了多种方式之后,总结了几种自适应的方式。 实时刷新iframe高度变化 var iframes = document.getElementsByTagName('iframe'); ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,519
精华内容 1,007
关键字:

iframevue刷新

vue 订阅