window.open父子窗口数据传递问题
来源:互联网 发布:pls tower 软件 购买 编辑:程序博客网 时间:2024/06/03 18:56
在开发的过程中,需要实现对window.open父子窗口进行数据传递的功能,遇到了一些问题。
1.window.open函数
window.open("url","窗口名称","参数字符串")
参数窗口名可以是:_blank,_top,_self等
参数字符串是对生成的窗口属性的设置:如width、height、menubar、scrollbars等,以逗号隔开,如(height=250, width=600,menubar=no, scrollbars=no)
2.简单的参数传递
对于一般的参数传递,我们可以把参数添加到url中,通过get的方式实现参数传递。这种方式对于一般的参数对被访问者可见。参数较小的情况下可行。
3.遇到的问题
在开发中,已经有一些参数通过添加到url的方式传递到子窗口了,但现在需要传递其他一些数据,并且这些数据可能较大,用url的方式可能被截断。(注:需要传递的数据从后台用ajax获取)
4.尝试
4.1 考虑将ajax获取的数据先存放在本地文件,当子页面打开后利用js进行对文件数据的读取。由于js是运行在浏览器上,而不是操作系统上,实际可操作性小。
4.2 考虑利用浏览器对ajax数据进行存储,子页面从浏览器中取数据。尝试利用sessionStorage和localStorage进行数据存储,发现数据在父窗口可存可取,但在子窗口取不出(原因:子窗口打开是一个新的window对象,而sessionStorage和localStorage对象是window的属性对象)
4.3 利用html5的sendMessage函数进行数据传递。实际结果:可行。
5.利用sendMessage函数传递
父窗口打开子窗口:
var popupwin = window.open('configfunc.html?ft=' + encodeURI(ft) + '&name=' + me_name + '&version=' + version + '&fields=' + other_fields, "配置函数", "height=250, width=600, top=50, left=150, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no"); popupwin.onload = function(e) { popupwin.postMessage(functionInfos,"chrome-extension://"+window.location.host); }
子窗口接受数据:
document.onreadystatechange = function(e){ if(document.readyState == 'complete') { window.addEventListener('message', function(e){ var data = e.data; fucNames = data; console.log("get data from father"); console.log(fucNames); if(fucNames instanceof Array) { for (var i in fucNames) { console.log(fucNames[i]); var option = document.createElement('option'); option.value = fucNames[i]['funcTemplate']; option.innerHTML = fucNames[i]['funcName'] + '---' + fucNames[i]['version']; selectBox.appendChild(option); } } else { console.log(fucNames); } }); }}
postMessage()函数实际上是通过listener监听器实现的。在postMessage函数的参数中,第一个参数是要传递的数据,第二个参数是目标页面的地址。postMessage函数通过第
二个参数获得目标页面的句柄,再将数据传递到目标页面的消息队列中,实现数据异步传输。
注意:postMessage()函数的第二个参数必须要与目标参数的url对应,包括协议。上例中是在chrome插件中打开子窗口,故协议是chrome-extension://
阅读全文
1 0
- window.open父子窗口数据传递问题
- window.open()父子窗口传值
- JS window 对象 open方法弹窗实现父子窗口中的参数传递
- javascript父子窗口传递数据
- window.showModalDialog刷新父窗口 父子窗口这间传值 问题
- window.open打开的父子页面通信问题
- window.open() 父子页面的传参&传值问题
- window.open() 父子页面的传参&传值问题
- 父子窗口以及,子框弹框之间的数据传递。
- window弹出窗口-父子-模态
- 关于window.showModalDialog 的简单应用,父子窗口之间的传递
- window.open传递参数
- 父子窗口焦点问题
- window.open模式窗口
- window.open弹出窗口
- window.open() 弹出窗口
- window.open() 弹出窗口
- window.showModalDialog刷新父窗口 父子窗口之间传值 问题
- spring+quartz+数据库实现定时任务
- iOS 中的类属性
- CSocket如何通知窗口(MFC)
- is not in the sudoers file.This incident will be reported
- to_char跟to_date
- window.open父子窗口数据传递问题
- 前辈写码需谨慎,接手开发很头疼
- 面试题:用两个栈实现队列&用两个队列实现栈
- 查漏补缺
- 进程、线程、协程 关于进程、线程、协程,有非常详细和丰富的博客或者学习资源,我不在此做赘述,我大致在此介绍一下这几个东西。 进程拥有自己独立的堆和栈,既不共享堆,亦不共享栈,进程由操作系统调度。
- mysql数据库的优化整理之数据库结构优化
- Hibernate基础学习(二)—Hibernate相关API介绍
- Java实现更改文件路径
- 2000-一维整形数组