2分钟通过javascript的opener方式实现调用父窗口方法示例

偕鸾
• 阅读 2215

父窗口的JS代码:

// 打开上传文件窗口
function uploadImgFile(id){  
    // open里面的参数详情,查看MDN,更系统的详情资源
    window.open("${base}/ajax/picupload.action?parentImgUrlId="+id,"","height=300, width=500, toolbar =no, menubar=no, scrollbars=yes, resizable=no, location=no, status=no");  
    //document.getElementById(id).value = someValue;  
}  
  
// 此方法将会被子窗口调用
function testfun(params){  
    alert("来自子窗口的参数:"+params);  
}

子窗口JS代码:

使用window.open后的子窗口调用父窗口方法代码

// 调用父窗口方法
function setParentImgUrl(){  
    window.opener.testfun('children');  

    // 直接操作父窗口dom元素 如赋值
    // window.opener.document.getElementById("${parentImgUrlId}").value = document.getElementById('img_url').value;  
    // 关闭窗口
    window.close();  
}
点赞
收藏
评论区
推荐文章
待兔 待兔
1年前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
编程范儿 编程范儿
4年前
Vue刷新页面有哪几种方式
在Vue项目中,刷新当前页除了window.reload(),你还能想到什么办法?而且这种办法会重新加载资源出现短暂的空白页面。体验不是很好。在某个详情页面的时候,我们经常需要通过路由中的详情id去获取内容,当我们在不同的详情页来回切换的时候,打开的页面是同一个,只是需要通过监听路由中的参数id的变化去重新请求详情接口。如果这个详情页只需要一个接口
Stella981 Stella981
4年前
Qt之窗口的父子关系:Widget与按钮
1、新建项目其他项目Emptyqmakeproject:只有一个pro程序1、新建项目其他项目codesnappedGuiapplication 2、修改main.cpp:在主窗口上显示一个按钮:也就是将按钮的父窗口设置为widget\因为QPushButton继承QWidget\,这样widg
Wesley13 Wesley13
4年前
JS必知的6种继承方式
JS作为面向对象的弱类型语言,继承也是其非常强大的特性之一。那么如何在JS中实现继承呢?让我们拭目以待JS继承的实现方式既然要实现继承,那么首先我们得有一个父类,代码如下:// 父类function Person(name) { // 给构造函数添加了参数  this.name  name;
Stella981 Stella981
4年前
Javascript中,实现类与继承的方法和优缺点分析
Javascript是一种弱类型语言,不存在类的概念,但在js中可以模仿类似于JAVA中的类,实现类与继承第一种方法:利用Javascript中的原型链1//首先定义一个父类23functionAnimal(name,age){4//定义父类的属性5thi
Wesley13 Wesley13
4年前
C++中各种获取窗口句柄的方法
AfxGetMainWndAfxGetMainWnd获取自身窗口句柄HWNDhWndAfxGetMainWnd()m\_hWnd;GetTopWindow函数功能:该函数检查与特定父窗口相联的子窗口z序(Z序:垂直屏幕的方向,即叠放次序),并返回在z序顶部的子窗口的句柄。函数原型:HWNDGetTopWind
Stella981 Stella981
4年前
EasyUI 关闭父窗口的modalDialog
这里使用的是easyui创建一个模式化的dialog扩展方法。easyuiUtil.js(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fobq1lvsd9.bkt.clouddn.com%2FeasyuiUtil.js)parent.$.mo
Stella981 Stella981
4年前
Angular路由参数传递
一、路由时传递参数的方式1、在查询参数中传递数据,如//前台页面<arouterLink"/product"queryParams"{id:1}"商品详情</a//后台页面获取参数exportclassProductComponentimplementsOnInit{
Json格式Java封装天猫商品详情数据接口,实现海量商品采集业务
根据天猫的API文档,获取天猫商品详情的API是通过发送Http/Post/GET请求,其中itemID是具体的商品ID。以下是Python和Java封装获取天猫商品详情API(复制Taobaoapi2014)的示例代码:1.请求方式:HTTPPOSTGE
taskbuilder taskbuilder
1年前
预览和测试
通过前面的操作,我们已经创建好了一个简单的学员信息管理应用,现在,我们点击项目资源管理器前端文件里的index.tfp,如下图:在打开的前端页面设计器里,点击顶部工具栏上的“预览”按钮:会打开列表页面的预览窗口,如下图所示:说明:预览时,服务器需要编译该页
利用京东商品详情 ID(即 SKU ID)获取商品详细信息
利用京东商品详情ID(即SKUID)获取商品详细信息,可通过京东开放平台官方API或非官方接口(逆向解析)实现。以下是两种方式的示例展示,包含代码实现与数据解析