父页面代码:

           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. 带你由浅入深探索webpack4(一)

    相信你或多或少也听说过webpack.gulp等这些前端构建工具.近年来webpack越来越火,可以说成为了前端开发者必备的工具.如果你有接触过vue或者react项目,我想你应该对它有所了解. 这几 ...

  2. Redux的中间件原理分析

    redux的中间件对于使用过redux的各位都不会感到陌生,通过应用上我们需要的所有要应用在redux流程上的中间件,我们可以加强dispatch的功能.最近也有一些初学者同时和实习生在询问中间件有关 ...

  3. 解决Google Play审核中的WebViewClient.onReceivedSslError问题

    Google Play应用市场提交应用审核,出现因WebViewClient.onReceivedSslError问题导致拒绝通过. Google Paly给出的详情地址:support.google ...

  4. Android 8.0对隐式广播的进一步限制

    项目targetSdkVersion升级到26后,对应的的是Android O版本,即Android 8.0系统.经测试发现针对8.0及以上安卓版本手机,AndroidMainfest.xml中静态注 ...

  5. 关于ASL(平均查找长度)的简单总结

    ASL(Average Search Length),即平均查找长度,在查找运算中,由于所费时间在关键字的比较上,所以把平均需要和待查找值比较的关键字次数成为平均查找长度. 它的定义是这样的: 其中n ...

  6. AI2(App Inventor 2)离线版服务器网络版

    个人修改包括: 1.后台增加用户批量添加功能         https://gte.fsyz.net/node/1877 2.上传文件限制改为100M ,编译文件限制改为10M      https ...

  7. gitbook 入门教程之前置知识

    markdown 基本知识 markdown 是一种简化的 html 语法,相比于 txt 无格式文本更强大. 你可以用专门的软件去编辑 markdown 文件,就像需要使用软件编辑 txt 文件一样 ...

  8. Git来操作GitHub~

    设置用户名(设置一次 以后就不用再设置了) git config --global user.name 'taopanfeng' 设置邮箱(设置一次 以后就不用再设置了) git config --g ...

  9. 秋季学期学习总结&&以及下学期的期待

    秋季总结 第一学期已经结束了,下面来分点归纳下知识点: ·基础编程:利用c语言来进行编程 ·分支结构:利用if-else语句和switch语句编程,以及字符型数据的利用 ·循环结构:利用while.d ...

  10. gin+gorm

    在[环境变量]中添加如下[用户变量]/[系统变量]:GO111MODULE,值为on go mod init目录 在项目中新建文件main.go,并添加测试代码 package main import ...