开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js调用子窗口函数

在JavaScript中，调用子窗口的函数通常涉及到window.open方法来打开一个新的浏览器窗口或标签页，并且可以通过window.opener属性或者iframe元素来实现父子窗口之间的通信。

基础概念

window.open: 这个方法用于打开一个新的浏览器窗口或标签页，并返回一个对新窗口的引用。
window.opener: 在新打开的窗口中，可以通过这个属性访问到打开它的原始窗口。
iframe: 内嵌框架元素，可以在当前页面中嵌入另一个HTML文档，通过contentWindow属性可以访问到iframe内的窗口对象。

优势

跨窗口通信: 允许不同窗口或iframe之间共享数据和调用函数。
用户体验: 可以实现弹出窗口、模态对话框等功能，增强用户交互。

类型

弹出窗口: 使用window.open打开的新窗口。
内嵌框架: 使用iframe嵌入的页面。

应用场景

模态对话框: 用于显示额外的信息或者获取用户输入，而不离开当前页面。
多窗口协作: 在多个窗口间共享数据或状态，例如在线文档编辑。
广告展示: 在网页中嵌入广告内容。

示例代码

假设我们有一个父窗口，需要调用子窗口中的一个函数sayHello。

父窗口代码:

// 打开子窗口
var childWindow = window.open('child.html', 'ChildWindow', 'width=400,height=300');

// 等待子窗口加载完成
childWindow.onload = function() {
    // 调用子窗口的sayHello函数
    childWindow.sayHello();
};

子窗口代码 (child.html):

<!DOCTYPE html>
<html>
<head>
    <title>Child Window</title>
    <script>
        function sayHello() {
            alert('Hello from child window!');
        }
    </script>
</head>
<body>
    <h1>Child Window</h1>
</body>
</html>

常见问题及解决方法

跨域问题: 如果父窗口和子窗口的域名不同，浏览器的同源策略会阻止它们之间的直接通信。解决方法是使用postMessage API进行安全的跨域通信。
父窗口发送消息:
父窗口发送消息:
子窗口接收消息:
子窗口接收消息:
窗口引用丢失: 如果子窗口被用户关闭或者导航到了其他页面，之前获取的窗口引用将失效。可以在调用函数前检查窗口是否仍然打开。
窗口引用丢失: 如果子窗口被用户关闭或者导航到了其他页面，之前获取的窗口引用将失效。可以在调用函数前检查窗口是否仍然打开。

通过上述方法，可以实现JavaScript中父子窗口之间的函数调用和通信。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

JS关闭所有的子窗口

/head> 1 子窗口..." onclick="logOut()"> var win_Array = []; let newWindow // open窗口事件...win[i].newWindow.close() } } } // 关闭窗口事件

1491 0

js动态调用函数

——孙子我们可以使用变量名['函数名']()去调用一个函数 var ruben = { run() { console.log("ruben中的run被调用啦！")...} } ruben['run']() 可以用于动态调用函数场景

22.1K2 0

React技巧之调用子组件函数

blog/react-call-function-in-child-component[1] 作者：Borislav Hadzhiev[2] 正文从这开始~ forwardRef 在React中，从父组件中调用子组件的函数...在子组件中使用useImperativeHandle钩子，来为子组件添加一个函数。在父组件中使用ref来调用子组件的函数。...useEffect 在React中，从父组件中调用子组件的函数：在父组件中声明一个count state 变量。在子组件中，添加count变量为useEffect钩子的依赖。...== 0) { childFunction1(); childFunction2(); } }, [count]); 在useEffect 钩子中，子组件声明并调用了两个函数。...父组件可以通过改变count state 变量的值，来运行子组件中useEffect里的逻辑。需要注意的是，我们在调用useEffect 里的函数之前，检查count的值是否不等于0。

2K2 0

js 外部调用嵌套函数

在函外部直接调用函数的内部函数是不可以的，因为是向外查找的所以不能直接内部函数 function one() { function two() {...var b = 30; } } one(); two(); 即使先调用外部函数也不可以找不到函数如果要直接调用内部函数可以把函数赋值给一个全局变量...one(); //再调用内部函数 a(); 或者直接赋值a也是可以调用的 //定义一个变量名 var b = 20;...30; console.log(b); } console.log(b); } //先调用外部函数...one(); //再调用内部函数 a(); 结果都是也可以这样调用window.onload里的函数 var a; window.onload

10.5K2 0

js中匿名函数自调用

理解 * 全称: Immediately-Invoked Function Expression 立即调用函数表达式 * 别名: 匿名函数自调用 2.

5.6K0 0

Python3 调用 js 函数

【PyExecJS】 #encoding: utf-8 #author: walker # date: 2019-03-13 # summary: 利用 PyExecJS 调用 js 函数 import...'' CTX = execjs.compile(JSCode) def test(): # 直接使用 print(execjs.get().eval('3+2')) # 调函数使用...#author: walker # date: 2019-03-13 # summary: 直接用 Node.js 调用 js 函数 from subprocess import check_output...def test(): # 直接调用 bytesTxt = check_output('node -e console.log(3+2)', timeout=100) print...指定函数】 #encoding: utf-8 #author: walker # date: 2019-03-14 # summary: 直接用 Node.js 调用指定 js 函数 from subprocess

3.2K1 0

JS传递函数并且调用

封装的函数： function getDataByJsonP(methName, inData, fn) { // 这里fn可以直接传入函数名字 $.ajax({ url:...function(){},//请求前的处理 success: function(data) { fn(data); // 下面直接fn() 括号里面传递方法所参数即可调用...error: function(errorInfo) { alert("异常信息，稍后重试"); } //请求出错的处理 }); } 调用的函数...： function test(data){ alert(data); } getDataByJsonP('','',test); // 这样即可调用

3.8K2 0

jquery跨js文件调用函数示例

1 var common_func; (function() { 2 common_func = { 3 load_hot_data...

5.2K3 0

JS高级原型以及函数调用方式

JavaScript 高级目标原型 ==函数的原型链== 函数和对象的原型链关系函数的4种调用方式箭头函数 2.原型 prototype -重点原型上存放函数解决了同一个 say 浪费内存的问题...num1 = 22;//局部变量 console.log(num); // 全局变量在任何地方都能访问到 console.log(num1); } console.log(num); 在js...函数作用域是在函数定义的时候作用域就确定下来了，和函数在哪调用无关。...根据函数内部this的指向不同，可以将函数的调用模式分成4种函数调用模式方法调用模式构造函数调用模式上下文调用模式（借用方法模式）函数调用模式如果一个函数不是一个对象的属性时，就是被当做一个函数来进行调用的...} } obj.sayHi(); 构造函数调用模式如果函数是通过new关键字进行调用的，此时this被绑定到创建出来的新对象上。

1031 0

Js 使用new关键字调用函数和直接调用函数的区别

最近开始学习js，在看到书上的一个例子时，引发了我的一系列思考：书上例子： function Person(name,age,job){ var o =new Object();...var person=Person("张三",20); //报错 person undefined 此处为普通函数调用，又没有给定返回值，出错。...person.sayName(); 得出结论：使用new关键字是将函数当作构造函数调用，即为构造对象，若没有人为的重写调用构造函数时返回的值，那么返回的对象是由解析器自己生成的。...不使用new关键字调用函数，即为普通函数调用。随即想到若是函数返回值是function型的呢？...），虽然new函数与直接调用函数产生的结果等同，但是是两个不同的过程，一个是构造对象、一个是函数调用。

3.7K1 0

js用户注册表单验证_onclick调用js函数

DOCTYPE html> js通过button的简单验证简单验证.

9K4 0

js匿名函数和命名函数_jsp调用java方法

由衷的感叹，js真是烦。学到现在，渐渐理解了什么是：语言都是通用的，没有好不好，只有擅长不擅长。...温故知新，今天又回味了一遍，匿名函数作为函数参数。代码很短，五脏俱全。...难道匿名函数自执行了？错！！！匿名函数！=自执行匿名函数真相只有1个：匿名函数作为参数，在调用(将匿名函数作为参数的)函数里被调用执行了。...function test( a, b ){ a+=1; // b是对象，函数名也是对象，所以b可以指代一个函数 // 类似c++中的函数名一样 // a被复制给了b(result) // js好灵活...b(a); } 以上这篇js匿名函数作为函数参数详解就是小编分享给大家的全部内容了，希望能给大家一个参考。

6.2K2 0

WPF 获取某个窗口的所有子窗口

如果不用到 Win32 方法，可以尝试遍历所有窗口获取 Owner 判断，不过此方法仅仅适合只有一个主线程通过 Win32 的 EnumChildWindows 可以拿到某个窗口句柄的所有子窗口，大概用法如下...) gcChildhandlesList.Target; childHandles.Add(hWnd); return true; } } 使用方法是先拿到窗口的句柄...，然后传入 GetAllChildHandles 方法，就可以拿到所有子窗口的句柄 var windowInteropHelper = new WindowInteropHelper...PINVOKE: Getting all child handles of window · Software adventures and thoughts 使用 EnumWindows 找到满足你要求的窗口

2.4K2 0

vue子组件调用父组件函数_vue子组件修改父组件值

直接在子组件中通过this....$parent.event来调用父组件的方法父组件： import...methods: { fatherMethod() { console.log('测试'); } } }; 子组件...在子组件里用$emit向父组件触发一个事件，父组件监听这个事件父组件： ...父组件把方法传入子组件中，在子组件里直接调用父组件： </div

1.7K2 0

【基于 JS 的函数式编程 - 4】函子 | MayBe函子 | Monad函子

我们知道，函数式编程的技术有柯里化、偏函数等等。错误处理也是一种技术，本节中我们会使用函子（Functor），用一种纯函数的方式帮助我们处理错误。...概念函子定义：函子是一个普通对象，它实现了map函数，在遍历每个对象值的时候生成一个新对象。即，函子是一个实现了 map 契约的对象！简单理解：函子是一个持有值的容器。...Container = function(val) {this.value=val;} let testVal = new Container(3); 这样一来，Container持有了内部的值，我们传入的任何js...MayBe.of(null) : MayBe.of(fn(ths.value)); } 调用： MayBe.of("string").map((x)=>x.toUpperCase()); // {value...那么，我们就可以知道 Monad 函子的一大特点就是能够避免深层嵌套，只要提供下一运算所需要的的函数，就能将函数拆解成互相连接的多个步骤，自动进行下去，并且每次都是只返回一个单层的函子。

2202 0

React ：（类、函数）子组件调用父组件的方法

React中子组件调用父组件的方法目录标题 React中子组件调用父组件的方法 1、类组件子组件父组件 2、函数组件子组件父组件 1、类组件子组件子组件中使用传过来的cancelCreateFile...【this.props.cancelCreateFile】，就可以在子组件中调用父组件父组件中将父组件中的cancelCreateFile方法传给子组件【cancelCreateFile={this.cancelCreateFile...}】，就可以在子组件中用了 2、函数组件子组件父组件

5.3K4 0

JS 匿名函数——几种不同的调用方式

声明：var func=function(){ } 调用：func(); var show = function(){ alert('hello'); }; show(); 注意：使用匿名函数表达式时...，函数的调用语句，必须放在函数声明语句之后！！！...原因：检查装载时，会先对show变量及这个匿名函数声明，此时，还未将匿名函数赋值给show变量，如果在表达式之前调用，会报错 show is not a function js代码的执行顺序问题 js...检查装载阶段：会先检测代码的语法错误，进行变量、函数的声明执行阶段：变量的赋值、函数的调用等，都属于执行阶段。 3.自执行函数。这里我总结了8种常用的匿名函数调用方法： //1.使用！...(function(){ document.write('wo hao'); })(); //3.能够将匿名函数与调用的()为一个整体，官方推荐使用； (function(){ document.write

4.2K1 0

c#子窗口与父窗口_主窗体控制子窗体的显示

方法较为简单，直接撸代码父窗口代码 using System; using System.Collections.Generic; using System.ComponentModel; using...Form2 f2 = new Form2(this); f2.Show(); this.Hide(); } } } 子窗口代码

2.6K2 0

vue 父组件调用子组件的函数_vue子组件触发父组件方法

1、使用场景项目里将element-ui的el-upload写成公共组件方便调用，官方的before-upload方法用于处理上传前要做的事，如：比较文件大小，限制文件类型等，通过返回true 或 false...当该组件调用父组件方法，并且要能获取到父组件方法的返回值，如何实现？ 2、问题说明通常子组件调用父组件方法：this....此时要用到高阶函数，传函数作为参数，父组件里执行该函数。...} } } 另一种实现方法：通过传Function，子组件可获取到父组件的方法。...export default { props: { // 子组件接收函数 beforeUpload: { type: Function

3K2 0

flink table窗口聚合的open函数未调用的bug分析

今天分析一下，flink table聚合udf AggregateFunction的open函数未被调用的bug。...但是flink内部coden的时候，被完全解析成了不同的聚合函数。...分别执行两个sql之后，你会发现：情景一：value of flag is : 100 情景二：value of flag is : 1 之所以会情景二没有被更改为 100 主要原因是open函数没有调用...情景二对应DataStream的AggregateFunction，而该函数并没有open方法。仅仅说的是滚动窗口，还有其它窗口AggregateUtil。...本文举例仅仅是一种窗口操作，更多的窗口聚合是否会调用aggregateFunction的open方法，可以仔细阅读AggregateUtil。

2.2K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭