首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

js 父窗体给子窗体赋值

在JavaScript中,父窗体可以通过多种方式向子窗体传递数据或赋值。以下是一些常见的方法:

基础概念

  • 父窗体:打开子窗体的窗口。
  • 子窗体:被父窗体打开的新窗口或标签页。

相关优势

  1. 模块化:通过分离不同的功能到不同的窗口,可以提高代码的组织性和可维护性。
  2. 用户体验:允许用户在不同的上下文中查看和操作数据,而不必刷新整个页面。

类型与应用场景

  • 通过URL参数传递:适用于简单的数据传递,如ID或简单的键值对。
  • 使用window.postMessage:安全地在不同源的窗口之间传递消息。
  • 直接访问子窗体的全局变量:适用于同源策略下的简单数据共享。

示例代码

方法一:通过URL参数传递

代码语言:txt
复制
// 父窗体
const childWindow = window.open('child.html?id=123&name=John');

// 子窗体 (child.html)
window.onload = function() {
    const urlParams = new URLSearchParams(window.location.search);
    const id = urlParams.get('id');
    const name = urlParams.get('name');
    console.log(`ID: ${id}, Name: ${name}`);
};

方法二:使用window.postMessage

代码语言:txt
复制
// 父窗体
const childWindow = window.open('child.html');
childWindow.onload = function() {
    childWindow.postMessage({ id: 123, name: 'John' }, '*');
};

// 子窗体 (child.html)
window.addEventListener('message', function(event) {
    if (event.origin !== 'http://example.com') return; // 安全检查
    console.log('Received data:', event.data);
});

方法三:直接访问子窗体的全局变量(同源)

代码语言:txt
复制
// 父窗体
const childWindow = window.open('child.html');
childWindow.myData = { id: 123, name: 'John' };

// 子窗体 (child.html)
console.log(window.myData); // { id: 123, name: 'John' }

遇到的问题及解决方法

问题:跨域数据传递失败

原因:浏览器的同源策略限制了不同源之间的脚本交互。 解决方法:使用window.postMessage方法,并确保在接收消息时进行源的安全检查。

问题:数据传递不完整或错误

原因:可能是由于URL参数编码不正确或postMessage的源检查不严格。 解决方法:确保所有数据都正确编码,并且在接收消息时严格验证消息来源。

通过上述方法和注意事项,可以有效地在父窗体和子窗体之间传递数据。选择合适的方法取决于具体的应用场景和需求。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

实现iframe父窗体与子窗体的通信

本文主要会介绍如何基于MessengerJS,实现iframe父窗体与子窗体间的通信,传递数据信息。同时本文会提供一个可运行的实例代码,实现在父窗体中,获取到来自子窗体的数据的效果。...'); (3) 在发现消息前,目标文档要确保已经监听了消息事件: messenger.listen(function(msg){ alert("收到消息: " + msg); }); (4) 父窗体想给子窗体发信息...这里分别是父窗体和子窗体的代码实现,可直接在浏览器中打开查看效果,其中messenger.js可以在这里下载,放到项目目录下。 父窗体: 子窗体也要先引入messenger.js,同时初始化一个messenger到一个统一的项目中,其中第一个参数为自己页面messenger对象的名字,第二个参数为项目名称;然后添加消息对象,告知子窗体的window...同时提供了一个完整的实例,可以实现子窗体向父窗体传递消息,父窗体通过监听消息事件,来获取子窗体消息的目的。如有问题,欢迎指正。

9.8K771
  • C# 子窗体中调用父窗体中的方法(或多窗体之间方法调用)

    ”与“Chilid子窗体”之间如何相互的调用方法。...C# 子窗体中调用父窗体中的方法(或多窗体之间方法调用) 看似一个简单的功能需求,其实很多初学者处理不好的,很多朋友会这么写: C# Code: //父窗体是是frmParent,子窗体是frmChildA...//在父窗体中打开子窗体 frmChildA child = new frmChildA(); child.MdiParent = this; child.Show(); //子窗体调父窗体方法...如果父窗体与子窗体在同一个模块内看似没有错,因为这种反向引用在同一个模块内是可行的,但程序不能这么写,你把它写死了!固化了!...假设我们的项目不断在扩展,需要将父窗体与子窗体分开在不同的模块,这段代码就完了!因为父窗体模块必须引用子窗体模块,而子窗体需要用到frmParent的类,又要引用父窗体的模块!

    8.4K20

    C# WPF MVVM模式下在主窗体显示子窗体并获取结果

    01 — 前言 在winform中打开一个新的子窗体很简单,直接实例化窗体并show一下就可以: Form2 f2 = new Form2(); f2.Show(); 或者 Form2...所以正常是通过调用框架下得WindowManager接口,在window后台代码中通过WindowManager注册需要弹出的窗体类型,在ViewModel通过WindowManager的Show或ShowDialog...02 — ShowDialog用法实现 首先实例化新的子窗体SubShowWindowViewModel ,然后通过CM框架的ioc容器获取IWindowManager接口,通过接口的ShowDialog...调出子窗体,ControlTestStr 用来显示子窗体的赋值并在界面显示。...ControlTestStr = subShowWindowViewModel.SubShowWindowStr; } } } 03 — 结果演示 ControlTestStr 获取到了新窗体的赋值并显示到了界面

    1.8K10

    Js窗体window大小设置(转)

    设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离  scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离  scrollWidth:获取对象的滚动宽度  offsetHeight:获取对象相对于版面或由父坐标...offsetParent 属性指定的父坐标的高度  offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置  offsetTop:获取对象相对于版面或由...offsetTop 属性指定的父坐标的计算顶端位置  event.clientX 相对文档的水平座标  event.clientY 相对文档的垂直座标  event.offsetX 相对容器的水平坐标...clientWidth、offsetWidth、clientHeight、offsetHeight均无关)  function resize(){           var win =  Ext.fly('窗体对象组件...');//获得要调整的窗体,注意这里先用Ext.fly的方式来获取组件 ,如果不行再换别的,如getCmp,get等

    6.1K20

    在Office应用中打开WPF窗体并且让子窗体显示在Office应用上

    我们可以简单的实例化一个WPF窗体对象然后在Office应用程序的窗体上打开这个新的WPF窗体,此时Office应用的窗体就是WPF的宿主窗体。...然后宿主窗体跟Office应用并不是在一个UI线程上,子窗体很可能会在宿主窗体后面看不到。...这个时候需要调用Win32函数,将Office应用的窗体设置为WPF子窗体的父窗体,这个函数的形式定义如下: [DllImport("user32.dll", SetLastError = true)]...下面方法是一个完整的方法,可以通过反射实例化一个WPF窗体对象,然后设置此WPF窗体对象为Office应用程序的子窗体,并正常显示在Office应用程序上。...WindowInteropHelper(winBox); winBoxIntreop.EnsureHandle(); //将Excel句柄指定为当前窗体的父窗体的句柄

    1.6K50

    VB 子窗体被PictureBox控件挡住无法显示

    1、问题描述     VB做机房收费系统的时候,用的MDI主窗体,在主窗体上加了一个Picturebox控件,运行的时候,点了子窗体,但是却没有出现,后来才发现,子窗体被Picturebox控件给当在了后面...2、问题原因    在MDI程序中,子窗体实际位于MDIClient里,就是说,子窗体的父窗体是MDIClient,而PictureBox和MDIClient属于同一级的    层次结构    ThunderMDIForm-MDIForm1...   --MDIClient    ---ThunderFormDC-Form1  子窗体1    ---ThunderFormDC-Form2  子窗体2    --ThunderPictureBoxDC...参数:    hWndChild:子窗口句柄。hWndNewParent:新的父窗口句柄。如果该参数是NULL,则桌面窗口就成为新的父窗口。    ...返回值:    如果函数成功,返回值为子窗口的原父窗口句柄;如果函数失败,返回值为NULL。

    1.4K20

    子组件传对象给父组件_react子组件改变父组件的状态

    子组件传值给父组件 首先 子组件(组件名“Child”)内定义一个方法 例如 sendData = () => { let data = ‘1234’; this.props.getData(data...); //这个this,props.xxx 后面的xxx是是在父组件那使用的名字; }, 然后可以在render函数后使用这个方法或者另外定义一个事件去触发该方法进行传值, 之后可在父组件(Parent...组件内:首先定义一个方法getData或者其他什么都可以随便取 ,这里的this.getData的这个方法是你随便取的那个,例如getData=this.xxx都可以,但是你这里是this.xxx,父组件内定义的方法就必须名字叫...xxx, 然后就是 xxx = (data) => { console.log(data); //此时就会打印 子组件传给父组件的data ,打印 : ‘1234’ } 版权声明:本文内容由互联网用户自发贡献

    2.8K30

    vue子组件传值给父组件_子组件调用父组件中的方法

    spm_id_from=trigger_reload 原理: 在父组件引用子组件时,通过事件绑定机制把一个方法aaaa的引用传给子组件,这个方法中可以有各种参数,子组件在触发自己的函数或者某些数据发生变化时...console.log('父组件的方法') } 步骤①:在子组件被调用的标签中,绑定一个父组件方法的引用 父组件通过事件绑定机制,也就是 @sendSon="fatherMethods" 方式传值给子组件..., 注意,这里是方法的引用,换句话就是把这个方法传递给子组件,而不是方法执行完以后的值,所以这里不能加括号 目的:把父组件的一个方法传给子组件 步骤② 给子组件写一个引发事件 子组件中写一个事件会触发一个子组件本身的方法...$emit操作父组件传过来的sendSon方法绑定的父组件的方法引用fatherMethods,这时就触发了父组件的方法 换句话说:子组件通过$emit出发了从父组件传过来的方法 sonEdit(){...$emit('sendSon') } 步骤④ 子组件在调用父组件时,传参数 真正的父组件中并没有调用这个show方法,只有传给的子组件中调用了,调用就可以传参数,那么就在子组件中触发时候传参数

    4.2K20
    领券