精华内容
下载资源
问答
  • 关于VUE嵌套iframe的一系列问题

    万次阅读 热门讨论 2018-07-17 12:04:13
    此文是建立在vue-cli之上 ,当然单写也可以,下文会涉及一些关于cli知识,单写请忽略;...本尊并不建议vue嵌套iframe,当然会有那些个比较恶心需求,例如在读小伙伴。 申明:本尊在iframe页面写入是JQ,...

    此文是建立在vue-cli之上 ,当然单写也可以,下文会涉及一些关于cli的知识,单写的请忽略;

    最近有很多小伙伴问超哥关于vue中嵌套iframe一些问题。

    犹豫本尊最近转型了react,关于vue的问题以后会在csdn发表博客。

    废话不多说,直接进入正题;

    本尊并不建议vue嵌套iframe,当然会有那些个比较恶心的需求,例如在读的小伙伴。

    申明:本尊在iframe页面写入的是JQ,因为和VUE没有特别大的牵连,所以直接操作dom了,如果有同学依然想在iframe页面中也是可以的,只需把本尊的代码copy copy copy,然后在改吧改吧就OK了。

    问题  1  (go back)

    例如:在iframe页面中有诸多跳转,当完成玩iframe页面中一些操作时,此时点击浏览器的回退功能,那么恭喜你中奖了,你回退的是iframe页面,并无法回退和iframe无关联的vue页面,一直点击浏览器的回退,可能会一直重复iframe连接的几个页面,或直接404,或空白。

    解决办法:使用H5的history对象。

    code:

    
           $(document).ready(function(e) { 
            var counter = 0;
            if (window.history && window.history.pushState) {
                 $(window).on('popstate', function () {
                            window.history.pushState('forward', null, '#');
                            window.history.forward(1);
                            window.parent.location.hash='/newActivity';//这里写你自己要回退的路径
                    });
              }
    
              window.history.pushState('forward', null, '#'); //在IE中必须得有这两行
              window.history.forward(1);
        });

    介绍:

             popstate:每当同一个文档的浏览历史(即history对象)出现变化时,就会触发popstate事件。

             forward:移动到下一个访问页面,等同于浏览器的前进键。

             其他的没啥了吧,相信大家也都能看懂,其实只需copy copy copy;

    问题  2  (iframe中的请求);

    关于请求其实没啥要说的,但是还是有人会问,既然问了那就顺便说一下吧。

    例如:有一个活动详情页面iframe,活动 列表是vue层,点击活动列表某一项跳详情,此时请求接口,地址栏带参数,像这种页面一般在iframe页面请求的接口中,最主要的参数就是活动ID,当然不排除你们公司有个奇葩后台,或者刚从某培训机构培训出来的所谓大牛,以此类推,参数继续带过来。

    code:

    function PcCommon(){
    	this.baseUrl='https://xxxxxxx';这里写你的基址路径
    }
    PcCommon.prototype={
    	GetQueryString: function(name) {
    		return decodeURIComponent((new RegExp('[?|&]'+name+'='+'([^&;]+?)(&|#|;|$)').exec(location.href)||[,""])[1].replace(/\+/g,'%20'))||null;
    	},//获取地址栏参数
    	ajaxPost:function(){
    		$.ajax({
    			url:this.baseUrl+url+signParam(),
    			type:'POST',
    			async:true,
    			data:JSON.stringify(data),
    			dataType:'json',
    			headers:{
    				"Authorization":getCookie('token'),
    				"Content-Type":"application/json;charset=UTF-8"
    			},
    			success:function(res){
    				if(typeof success == 'function'){
    					success(res)
    				}		
    			}
    		})
    	},//二次分装ajax
    	goTop:function(id){
    		var num = $('.'+id).offset().top+125+'px';
    		$('html,body', window.parent.document).animate({scrollTop: num }, 500);
    	}//分装的滚动,白送
    }

    这是本尊写的一个简单的base.js就是原生的面向对象。

    写到基址路径的时候这里还真有必要说一下这个请求。

    首先vue打包的时候并不会把iframe中的html打包进去,所以当初你在main.js中设置的那些基址以及common是不能用的,所以base.js才产生了基址路径,当然你准备部署的时候一定要记得改掉你的基址路径,建议,最好写两个,一个注释,一个打开,也挺方便,一目了然;

    接下来是调用,上代码;

    code:

    var newHd=new PcCommon();
    	var actStage=newHd.GetQueryString('actStage');//获取iframe地址栏参数实例
    	var actId=newHd.GetQueryString('actId');//获取活动ID
    	newHd.baseUrl = 'http://192.168.0.13:7500/';//更改你的基址路径,上线的时候直接注释掉就OK
    
    $('.confirm_simne_btn').on('click',function(){
    		var that=this;
    		newHd.ajaxPost(
    			'/activity/v1/invitation/claimPrize',
    			{
    				activityId:actId,
    				prizeLevel:id
    			},
    			function(res){
    				console.log(res)
                    //直接写你的操作就OK
    			}
    		)
    	})

    就个简单的ajax请求,真没啥要说,不过刚刚在写文的过程中又想起一些知识点,继续下文。

    问题  3(由问题2引发===>关于目录)

    npm run build 相信这条命令是干啥的大家都清楚,会生成一个dist文件,在这里我不批判他人,只说我的做法;

    例如:还是拿活动举例,活动列表下有诸多个不同的template,犹豫打包并不会把iframe文件打包进去,所以我直接把他放在dist文件下,发布的时候直接打包dist。

    直接上图:

    简单的介绍一下,dist不用多说了,static以及index.html也不用说了,最主要的看newAct这个夹子,这个夹子就是你们所谓的活动夹子,里面有public和view,public主要放的一些公共的css、js、以及第三方包。view里面就是各个活动的夹子,例如duyuesheng这个夹子,就和你正常写H5一样,里面 有js、css,这些你们就随意发挥吧。

    就先介绍到这里?

    还有在iframe中操作vue的方法,在firame中跳转到vue指定的路径....问题有很多,也不是一句两句能说清楚的,关键没个很好的例子给大家演示,就这样吧,有不懂的可以留言或者私密我....

    此文写给那些需要的人看,不喜勿喷!!!

    展开全文
  • vue嵌套iframe问题

    2020-11-18 13:54:29
    现将调用过程中遇到的问题做一个分享。 router.go()的使用   此情况主要适用于更改iframe中src值以后导致的路由跳转混乱。   详细描述:当多次更改iframe->src属性后,调用router.go(-1),不能实现路由...

    最近在项目中遇到一个需求需要在一个项目中直接引用另一个项目,尝试各种情况无果后选择了iframe。现将调用过程中遇到的问题做一个分享。

    router.go()的失效问题

      此情况主要适用于更改iframe中src值以后导致的路由跳转混乱。

      详细描述:当多次更改iframe->src属性后,调用router.go(-1),不能实现路由后退上一级,而是将iframe当作一个窗口文档,调用了该窗口文档的window.history.go(-1),并未更改父级项目的路由后退功能。

      解决办法:

      不通过改变iframe->src属性值去访问具体内容,采用window.location.replace(url)更改iframe将访问的内容,具体代码如下:

    <!-- A.html -->
     
    <template>
     
    <iframe ref="iframe" scrolling="auto" width="100%" height="100%" frameborder="0" ></iframe>
     
    </template>
     
    <script>
     
     
    this.$refs.iframe.contentWindow.location.replace(val)
    
    
    </script>

    这有一个iframe标签,src指向的是一个路径(图片路径)

    在这里插入图片描述
    在浏览器上用审查元素看一下:1.iframe 2.#document 3.html 4.head 5.body 6.body.img
    在这里插入图片描述
    那么问题来了,怎么给iframe里边的img设置宽和高呢?

    1. let iframe =.document.getElementById(“preview”);//通过id找到想要元素
    2. let iwindow = iframe.contentWindow;//获取iframe的window对象
    3. 以下很是致命,切记:在iframe加载完毕才能拿到里面的所有document树(代码第五行)
    4. let idoc = iwindow.document; //获取iframe的document
    5. let img = idoc.getElementsByTagName(‘img’)[0];//搜索指定元素的后代,不包括自身,【0】第一个’img’
    6. img.width = iframe.clientWidth;将iframe的宽赋值给图片,高也是一样。
      let iframe = document.getElementById("preview");//通过id找到想要元素
                    console.log("iframe",iframe);
                    let iwindow = iframe.contentWindow;
                    
                    iframe.addEventListener('load',function () {
                    // 在iframe加载完毕才能拿到里面的所有document树
                    //很重要,必须放置在load函数里
                    //切记,坑深勿踩
                        let idoc = iwindow.document;
                        console.log("iwindow", iwindow);
                        console.log("idoc", idoc);
    
                        let img = idoc.getElementsByTagName('img')[0];
                        if (img) {
                            if(img.width >= img.height){
                                img.width = iframe.clientWidth;
                                let top = (iframe.clientHeight - img.height) / 2;
                                img.style.marginTop = top + "px";
                            }else {
                                img.height = iframe.clientHeight;
                                let left = (iframe.clientWidth - img.width) / 2;
                                img.style.marginLeft = left + "px";
                            }
                        }
       })
    

     clientWidth = width+左右padding;
    clientHeigh = height + 上下padding ;
    clientTop = boder.top(上边框的宽度);
    clientLeft = boder.left(左边框的宽度);
    marginTop:设置一个p元素的上部边距
    marginLeft:设置一个p元素的左部边距

    以下内容可加在合适的位置控制台输出查看

                        // console.log("window",iwindow);//获取iframe的window对象
                        // console.log("document",idoc);  //获取iframe的document
                        // console.log("html",idoc.documentElement);//获取iframe的html
                        // console.log("head",idoc.head);  //获取head
                        // console.log("body",idoc.body);  //获取body
                        // console.log("img",idoc.getElementsByTagName('img'[0]));//获取img
                        // console.log("iframeWidth",iframe.clientWidth);//获取iframe的宽
                        // console.log("imgWidth",idoc.body.getElementsByTagName('img'[0]));//获取img的宽
    

     

    展开全文
  • vue嵌套iframe一系列问题

    千次阅读 2019-05-14 13:30:05
    vue嵌套iframe一系列问题 最近在项目中遇到一个需求需要在一个项目中直接引用另一个项目,尝试各种情况无果后选择了iframe。现将调用过程中遇到的问题做一个分享。 router.go()的使用   此情况主要适用于更改...

    vue嵌套iframe一系列问题

    最近在项目中遇到一个需求需要在一个项目中直接引用另一个项目,尝试各种情况无果后选择了iframe。现将调用过程中遇到的问题做一个分享。

    router.go()的使用

      此情况主要适用于更改iframe中src值以后导致的路由跳转混乱。

      详细描述:当多次更改iframe->src属性后,调用router.go(-1),不能实现路由后退上一级,而是将iframe当作一个窗口文档,调用了该窗口文档的window.history.go(-1),并未更改父级项目的路由后退功能。

      解决办法:

      不通过改变iframe->src属性值去访问具体内容,采用window.location.replace(url)更改iframe将访问的内容,具体代码如下:

    <!-- A.html -->
    <template>
      <iframe ref="iframe" scrolling="auto" width="100%" height="100%" frameborder="0" ></iframe>
    </template>
    <script>
    export default {
      name: 'ComponentsName',
      data() {
        return {
          url: ''
        }
      },
      watch: {
        url(val) {
          if (val) {
            this.$refs.iframe.contentWindow.location.replace(val)
          }
        }
      }
    }
    </script>
    复制代码

    通信(父页面和子页面相互通信)

      两个项目之间相互通信,涉及到跨域问题,子页面不能直接调用父页面的方法,父页面同样不能调用子页面的方法。

      错误详情:Error in created hook: "SecurityError: Blocked a frame with origin "http://*" from accessing a cross-origin frame."

      解决办法: postMessage

      window.postMessage() 方法可以安全地实现跨源通信。该方法被调用时,会在所有页面脚本执行完毕之后向目标窗口派发一个MessageEvent消息。代码如下:

    <!-- index.html -->
    <!DOCTYPE html>
    <html>
    <head>
      <title>Post Message</title>
    </head>
    <body>
      <div>
        <div id="color">Frame Color</div>
      </div>
      <div>
        <iframe id="child" width="50%" src="http://172.16.110.188/test.html" height="50vw" scrolling="auto" frameborder="0"></iframe>
      </div>
      <script type="text/javascript">
        window.onload=function(){
          document.getElementById('child').contentWindow.postMessage('getcolor','http://172.16.110.188');
        }
        window.addEventListener('message',function(e){
          var color=e.data;
          document.getElementById('color').style.backgroundColor=color;
        },false);
      </script>
    </body>
    </html>
    复制代码
    <!-- test.html -->
    <!doctype html>
    <html>
    <head>
      <style type="text/css">
        html,body{
          height:100%;
          margin:0px;
        }
        #container{
          widht:100%;
          height:100%;
          background-color:rgb(204, 102, 0);
        }
      </style>
    </head>
    <body style="height:100%;">
      <div id="container" onclick="changeColor();">
        click to change color
      </div>
      <script type="text/javascript">
        var container=document.getElementById('container');
        window.addEventListener('message',function(e){
          if(e.source!=window.parent) return;
          var color=container.style.backgroundColor;
          window.parent.postMessage(color,'*');
        },false);
        function changeColor () {            
          var color=container.style.backgroundColor;
          if(color=='rgb(204, 102, 0)'){
              color='rgb(204, 204, 0)';
          }else{
              color='rgb(204,102,0)';
          }
          container.style.backgroundColor=color;
          window.parent.postMessage(color,'*');
        }
      </script>
    </body>
    </html>
    复制代码

      上面的例子实现了两个不同域的页面之间的通信。但由于我们此处用的是动态更改iframe.contentWindow.location来访问的内容,如果此处父页面要向子页面发起通信需要在iframe中页面加载完毕以后,不然子页面无法获取到通信数据。

    应用场景

      子页面需要调用父页面的方法或则使用父页面的数据时候,我们可以在子页面向父页面发起通信,让父页面调用该方法,或让父页面将数据传输过来。

    注意事项

      postMessage支持对象传递,但不是所有浏览器都支持对象传递,在使用中还是使用字符串传值更好。

    转载于:https://juejin.im/post/5cdac2bbf265da03925804c7

    展开全文
  • router.go()使用此情况主要适用于更改iframe中src值以后导致路由跳转混乱。详细描述:当多次更改iframe->src属性后,调用router.go(-1),不能实现路由后退上一级,而是将iframe当作一个窗口文档,调用了该...

    router.go()的使用

    此情况主要适用于更改iframe中src值以后导致的路由跳转混乱。

    详细描述:当多次更改iframe->src属性后,调用router.go(-1),不能实现路由后退上一级,而是将iframe当作一个窗口文档,调用了该窗口文档的window.history.go(-1),并未更改父级项目的路由后退功能。

    解决办法:

    不通过改变iframe->src属性值去访问具体内容,采用window.location.replace(url)更改iframe将访问的内容,具体代码如下:

    exportdefault{

    name: 'ComponentsName',

    data() {

    return{

    url: ''

    }

    },

    watch: {

    url(val) {

    if(val) {

    this.$refs.iframe.contentWindow.location.replace(val)

    }

    }

    }

    }

    复制代码

    通信(父页面和子页面相互通信)

    两个项目之间相互通信,涉及到跨域问题,子页面不能直接调用父页面的方法,父页面同样不能调用子页面的方法。

    错误详情:Error in created hook: "SecurityError: Blocked a frame with origin "http://*" from accessing a cross-origin frame."

    解决办法: postMessage

    window.postMessage() 方法可以安全地实现跨源通信。该方法被调用时,会在所有页面脚本执行完毕之后向目标窗口派发一个MessageEvent消息。代码如下:

    Post Message

    Frame Color

    展开全文
  • vuex是什么 vuex是一个专本为vue.js开发状态管理模式,它采用集中式存储管理所有组件状态。并以相应规则保证状态以一种可预测方式发生变化。...对于问题一,传参方法对于多层嵌套的组件将会非常繁...
  • 应用场景 vue嵌套一个iframe,如果vue要监听iframe某一数值变化,从而进行相应处理 (应用原理是 iframe使用postMessage 解决跨域问题的相似原理) vue 注册全局监听 在iframe中 加载完成后 点击事件 子页面...
  • $('#content iframe')....加上此行代码进行强制刷新,document.getElementById(iframe的ID).contentWindow.location.reload(true);var $div = $('.main-sidebar > .sidebar-menu');$div.on('click', 'li[data-hre...
  • vue中元素嵌套iframe后绑在元素上点击事件失效 点击事件和拖拽事件冲突 使用 focus-outside 库解决 iframe和父组件之间通信问题
  • 如标题,我用vue嵌套其他页面,有些页面需要cookie,但用这个标签嵌套cookie直接丢失了,怎么把他加上?我只是动态设置了src值而已 还有个问题就是,有时候会显示:重定向次数过多 ,是怎么解决?
  • 最近遇到个比较古怪的问题:当页面嵌套多个 Iframe 时会出现 Iframe 里包含的页面无法看到最新的页面信息。初步解决方案,在 Iframe 指向的页面地址后缀添加一个随机数或者时间戳。这样能确保每次在加载页面时,让...
  • 当前位置:首页 > 数据库 > 正文vue iframe嵌套页面高度自适应 (ios 宽度扩大bug , ios展示比例问题)2020-02-12 data(){ return{ srcUrl:"", iframeType:false }; }, created() { ...
  • $('#content iframe')....加上此行代码进行强制刷新,document.getElementById(iframe的ID).contentWindow.location.reload(true);var $div = $('.main-sidebar > .sidebar-menu');$div.on('click', 'li[data-hre...
  • vue中嵌套iframe,将要嵌套的文件放在static下面。... <...top: -300px;left: 0px;...补充知识:关于VUE嵌套iframe的一系列问题 此文是建立在vue-cli之上 ,当然单写也可以,下文会涉及一些关于cli的知识,
  • 问题:主页面为.vue,页面中嵌套iframe,目的是使用视频通话插件,需要向html页面传值,只需两个步骤即可
  • iframe name = "child" id = "child" :src="www.baidu.com#asd=1" width="1920" height="880" frameborder="0" scrolling="no" s
  • 使用vue嵌套本地HTML

    2020-12-08 12:01:20
    调用vue嵌套本地HTML坑 当我使用button获取时没有问题 iframeValue(){ var oIframe = document.getElementById('show-iframe'); console.log(oIframe.contentWindow.document) console.log(oIframe....
  • 关于 iframe 嵌套 问题

    2019-11-12 20:46:36
    vue项目中,使用iframe嵌套另一个域名项目下一个jsp页面,报错 问题为:X-Frame-Options 设置为了SAMEORIGIN。 原理: X-frame-options响应头。赋值有如下三种: (1)DENY:不能被嵌入到任何iframe或...
  • 需求是一个项目需要嵌套另一个项目页面而且还有数据传递和跳转 父页面代码 <template> <div> <iframe :src="src" id="iframe"></iframe> </div> </template> <...
  • 需求:**后台跳转预览前台页面然后通过传值取到相应数据 ,通过vue+iframe 实现 ** 代码: // 后台到你的iframe嵌套的页面跳转方法,携带参数 toPreview(index,row) { let routeData = this.$router.resolve({ ...
  • 第一层路由我写在app....描述:子路由,也叫路由嵌套,采用在children后跟路由数组来实现,数组里和其他配置路由基本相同,需要配置path和component,然后在相应部分添加来展现子页面信息,相当于嵌入iframe。 Home.v
  • vue 路由嵌入iframe 刷新保留当前页面

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

    万次阅读 2019-07-11 16:53:38
    最近写项目,遇到一个问题,那就是如何把vue项目和H5页面嵌套在一起呢? 看似风马牛不相及,万万没想到,还有个iframe在候着呢! 真是JS解决不了,可别忘了还有标签呢! 步入正题: 一、介绍: HTML 中<...
  • 如下图所示,所嵌套的Iframe页面是一个 Vue项目中动态表单。 出现了在IOS端访问时,点击页面中输入框(像往常一样单击)touchstart -> touchend 事件 之间小于300ms则无法唤起输入法,并且光标也不会聚集到...
  • 主要有两种方法:一、通过接口请求,然后v-html渲染,这种方法试验之后发现不行,v-html不会渲染内部页面二、iframe的方式(解决引入成功之后获取不到引入的标签问题及跨域问题)需要嵌套的网页地址为:...
  • 因为工作的需要、所以一直都在用html的形式来写vue、用的ui框架是element、两个页面都是vue页面、下面就是我在这之中遇到的问题 // 父页面中的ifarm <iframe :src="src" frameborder="0" ref="refed" width="100%...
  • vue一个组件中嵌套IFrame ,这时,为了vueiframe交互事件,选择使用window.postMessage方法进行交互; 交互方式有点类似于websocket,是双方建立起一个通道; 问题: 当我项目中有两个模块同时调用了这个...
  • 嵌套iframe的URL: http://a/iframe.page.html; a.vue代码如下: <template> <div> <p> 这是主界面,嵌套IFrame页面 </p> <iframe src=...
  • 1.一个公共组件包含多个iframe嵌套页面,希望是每次激活的iframe页面能做到缓存内容; 2.这个公共组件注册共享一个路由; 原先解决思路:使用keep-alive标签做缓存,结果公共组件是缓存了,但每次切换加载iframe...

空空如也

空空如也

1 2 3
收藏数 57
精华内容 22
关键字:

vue嵌套iframe的问题

vue 订阅