javascript浏览器窗口之间传递数据的方法


Posted in Javascript onJanuary 20, 2015

本文实例讲述了javascript浏览器窗口之间传递数据的方法。分享给大家供大家参考。具体分析如下:

摘要:

在项目开发中我们经常会遇到弹窗,有的是通过div模拟弹窗效果,有的是通过iframe,也有通过window自带的open函数打开一个新的窗口。今天给大家分享的是最后一种通过window.open()函数打开页面进行数据交互。首先看下效果图:

javascript浏览器窗口之间传递数据的方法

原理:

父窗口给子窗口传递数据是通过url的参数传递过去,子窗口给父窗口传递数据是通过父窗口的全局函数传递。

代码:
index.html如下:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <div id="content"></div>

    <button id="test">按钮</button>

    <script>

        var test = document.getElementById('test');

        test.onclick = function() {

            window.open('./window.html?param1=name¶m2=password', '_blank','width=960,height=650,menubar=no,toolbar=no,location=no,directories=no,status=no,scrollbars=yes,resizable=yes');

        };

        window.getContent = function(tx) {

            document.getElementById('content').innerText = tx;

        }

    </script>

</body>

</html>

window.html如下:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <div id="content"></div>

    <select name="" id="city">

        <option value="shanghai">上海</option>

        <option value="hangzhou">杭州</option>

    </select>

    <script>

        var params = location.href.substring(location.href.lastIndexOf('?')+1).split('&');

        document.getElementById('content').innerText = params;

        var city = document.getElementById('city');

        city.onchange = function() {

            window.opener.getContent(city.value);

        }

    </script>

</body>

</html>

注意:这里需要有服务环境运行

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
javascript中的作用域scope介绍
Dec 28 Javascript
JQuery验证工具类搜集整理
Jan 16 Javascript
jquery 获取表单元素里面的值示例代码
Jul 28 Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
Dec 16 Javascript
解决jquery版本冲突的有效方法
Sep 02 Javascript
jQuery源码解读之hasClass()方法分析
Feb 20 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
Jan 12 Javascript
JavaScript获取客户端IP的方法(新方法)
Mar 11 Javascript
Node.js连接MongoDB数据库产生的问题
Feb 08 Javascript
SVG描边动画
Feb 23 Javascript
JavaScript数组及常见操作方法小结
Nov 13 Javascript
vue3+typeScript穿梭框的实现示例
Dec 29 Vue.js
用队列模拟jquery的动画算法实例
Jan 20 #Javascript
jQuery 处理页面的事件详解
Jan 20 #Javascript
DOM 事件流详解
Jan 20 #Javascript
jQuery链使用指南
Jan 20 #Javascript
使用jQuery管理选择结果
Jan 20 #Javascript
javascript动态修改Li节点值的方法
Jan 20 #Javascript
js+css实现tab菜单切换效果的方法
Jan 20 #Javascript
You might like
php环境配置之CGI、FastCGI、PHP-CGI、PHP-FPM、Spawn-FCGI比较?
2011/10/17 PHP
利用phpexcel把excel导入数据库和数据库导出excel实现
2014/01/09 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
JS Replace()的高级使用方法介绍
2013/06/29 Javascript
javascript正则表达式之search()用法实例
2015/01/19 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
2015/02/20 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
2016/06/25 Javascript
再谈Javascript中的基本类型和引用类型(推荐)
2016/07/01 Javascript
值得学习的bootstrap fileinput文件上传工具
2016/11/08 Javascript
jQuery复合事件结合toggle()方法的用法示例
2017/06/10 jQuery
深入理解vue.js中的v-if和v-show
2017/06/22 Javascript
使用apifm-wxapi快速开发小程序过程详解
2019/08/05 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
2019/08/20 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
2019/10/29 Javascript
JavaScript队列结构Queue实现过程解析
2020/03/07 Javascript
Vue组件通信$attrs、$listeners实现原理解析
2020/09/03 Javascript
Python批量修改文本文件内容的方法
2016/04/29 Python
Python运行不显示DOS窗口的解决方法
2018/10/22 Python
Python常用特殊方法实例总结
2019/03/22 Python
Python3.7黑帽编程之病毒篇(基础篇)
2020/02/04 Python
python将音频进行变速的操作方法
2020/04/08 Python
HTML5中的Web Notification桌面右下角通知功能的实现
2018/04/19 HTML / CSS
挪威太阳镜和眼镜网上商城:SmartBuyGlasses挪威
2016/08/20 全球购物
职工代表大会主持词
2014/04/01 职场文书
爱之链教学反思
2014/04/30 职场文书
宪法宣传周工作方案
2014/05/26 职场文书
2014优秀党员事迹材料
2014/08/14 职场文书
入党自荐书范文
2015/03/05 职场文书
2015年度信用社工作总结
2015/05/04 职场文书
工作态度检讨书范文
2015/05/06 职场文书
2016年中秋节晚会领导致辞
2015/11/26 职场文书
2016特色励志班级口号
2015/12/24 职场文书
民警忠诚教育心得体会
2016/01/23 职场文书
详解Python描述符的工作原理
2021/06/11 Python
python自动化八大定位元素讲解
2021/07/09 Python
使用Python获取字典键对应值的方法
2022/04/26 Python