父页面代码:

           html:

    <div id="app">

//省略业务代码x行.....

<iframe src="/sonpage" >

//省略业务代码x行.....

</div>

vuejs:

var vm = new Vue({
  el: '#app',
  data: {

id:'123',

  },
  mounted: function() {
    this.$nextTick(function() {
    // 初始化
    })
  },
  methods: {
    getId() {
      return:this.id;
    }
  }
});

    子页面调用父页面方法:

mounted: function() {
    this.$nextTick(function() {

 var id =  parent.vm.getId();

                                console.log(id);

      // 初始化
    })
  },

iframe 父页面调用子页面的vue方法的更多相关文章

  1. 使用iframe父页面调用子页面和子页面调用父页面的元素与方法

    在实际的项目开发中,iframe框架经常使用,主要用于引入其他的页面.下面主要介绍一下使用iframe引入其他页面后,父页面如何调用子页面的方法和元素以及子页面如何调用父页面的方法和元素. 1.父页面 ...

  2. 父页面调用子页面js的方法

    iframe子页面调用父页面javascript函数的方法今天遇到一个iframe子页面调用父页面js函数的需求,解决起来很简单,但是在chrome浏览器遇到一点小问题.顺便写一下iframe的父页面 ...

  3. Iframe父页面与子页面之间的相互调用

    iframe元素就是文档中的文档. window对象: 浏览器会在其打开一个HTML文档时创建一个对应的window对象.但是,如果一个文档定义了一个或者多个框架(即:包含一个或者多个frame或者i ...

  4. Iframe父页面与子页面之间的调用

    原文:Iframe父页面与子页面之间的调用 Iframe父页面与子页面之间的调用 专业词语解释如下:     Iframe:iframe元素是文档中的文档.     window对象: 浏览器会在其打 ...

  5. JQuery操作iframe父页面与子页面的元素与方法

    JQuery操作iframe父页面与子页面的元素与方法 JQUERY IFRAME 下面简单使用Jquery来操作iframe的一些记录,这个使用纯JS也可以实现. 第一.在iframe中查找父页面元 ...

  6. layer通过父页面调用子页面的方法及属性

    引言 在使用layer.js的过程中,需要通过layer.open()以iframe的形式打开特定的页面,同时需要用layer的按钮对打开的页面进行提交及重置操作,但是苦于不知如何在父页面调用子页面的 ...

  7. IFrame父页面和子页面的交互

    现在在页面里面用到iframe的情况越来越少了,但有时还是避免不了,甚至这些页面之间还需要用js来做交互,那么这些页面如何操作彼此的dom呢?下面将会逐步介绍. 1.父页面操作子页面里面的dom 下面 ...

  8. iframe父页面与子页面赋值

    最近因为公司之前的系统用iframe,里面的高度不能自适应,导致了很多问题,今天特意拿来研究一下,从网上找了一些方法试验了一下,这里记录一下成功的方法 1.父页面获取子页面的高度,并给父页面赋值 父页 ...

  9. jquery、js调用iframe父窗口与子窗口元素的方法整理

    1. jquery 在iframe子页面获取父页面元素代码如下: $("#objid", parent.document) 2. jquery在父页面 获取iframe子页面的元素 ...

随机推荐

  1. 怎么构建vue-cli项目

    1.安装node.js(已安装可直接跳过,建议查看node版本,node -v): 2.npm包管理器,是集成在node中的,可跳过(npm -v): 3.由于npm的有些资源被墙,为了更快更稳定,所 ...

  2. [Inside HotSpot] C1编译器HIR的构造

    1. 简介 这篇文章可以说是Christian Wimmer硕士论文Linear Scan Register Allocation for the Java HotSpot™ Client Compi ...

  3. 【Android Studio安装部署系列】十七、Android studio引用第三方库、jar、so、arr文件

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 概述 在Android开发过程,经常需要用到第三方库以及jar.so.arr文件,那么如何引用到项目中呢?下面简单介绍下. 引用第三方库 ...

  4. [asp.net core 源码分析] 01 - Session

    1.Session文档介绍 毋庸置疑学习.Net core最好的方法之一就是学习微软.Net core的官方文档:https://docs.microsoft.com/zh-cn/aspnet/cor ...

  5. Asp.Net Core&Docker部署到树莓派3B中

    花了一点时间将吃灰数月的树莓派装上了Docker,并在容器中部署了一个Asp.Net Core应用程序,通过花生壳映射树莓派中的程序,可以使用外网访问树莓派,玩起来很有意思(外网访问地址:http:/ ...

  6. 讲解:为什么重写equals时必须重写hashCode方法

    一 :string类型的==和equals的区别: 结论:"=="是判断两个字符串的内存地址是否相等,equals是比较两个字符串的值是否相等,具体就不做扩展了,有兴趣的同学可以去 ...

  7. 关于Data URLs svg图片显示出错和浏览器URL hash #

    在使用生成的svg图作为<img>标签是src值时,发现有部分浏览器显示异常,所以这里记录下 参考链接 Data URLs http://www.faqs.org/rfcs/rfc2397 ...

  8. 激活效能,CODING 敏捷研发模块上线

    昨晚,巴黎圣母院失火,而我们当中的许多人都还没来得及去欣赏它的真容.我们曾以为美好的事物会等待我们,伟大的目标也会等待我们.世事无常,唯一不变的就是变化.在软件研发领域,敏捷研发就是这么一个小步快跑来 ...

  9. 1.App Inventor 2简介

    App Inventor 原是Google实验室(Google Lab)的一个子计划,由一群Google工程师和勇于挑战的Google使用者共同参与设计完成.Google App Inventor是一 ...

  10. SVN使用规范

    1.提交之前先更新.当完成功能之后,首先检查自己修改了什么 ,然后通过编译并且自己测试之后,谨慎地提交,不可强行提交. 2.在更新时注意所更新文件的列表,如果提交过程中产生了更新,也需要重新编译并且完 ...