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入门学习书籍推荐
Jun 12 Javascript
一个基于jquery的图片切换效果
Jul 06 Javascript
javascript 窗口加载蒙板 内嵌网页内容
Nov 19 Javascript
extjs关于treePanel+chekBox全部选中以及清空选中问题探讨
Apr 02 Javascript
js日期对象兼容性的处理方法
Jan 28 Javascript
jQuery中$.ajax()方法参数解析
Oct 22 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
Oct 31 Javascript
jquery 标签 隔若干行加空白或者加虚线的方法
Dec 07 Javascript
JS操作xml对象转换为Json对象示例
Mar 25 Javascript
Vue中添加手机验证码组件功能操作方法
Dec 07 Javascript
详解vue渲染函数render的使用
Dec 12 Javascript
Angular6 写一个简单的Select组件示例
Aug 20 Javascript
用队列模拟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
第六节 访问属性和方法 [6]
2006/10/09 PHP
开发大型PHP项目的方法
2006/10/09 PHP
PHP初学者常见问题集合 修正版(21问答)
2010/03/23 PHP
有关php运算符的知识大全
2011/11/03 PHP
PHP获取当前完整URL地址的函数
2014/12/21 PHP
php+mysqli实现批量替换数据库表前缀的方法
2014/12/29 PHP
php无限分类使用concat如何实现
2015/11/05 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
jQuery实现加入购物车飞入动画效果
2015/03/14 Javascript
JavaScript检测字符串中是否含有html标签实现方法
2015/07/01 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
2015/11/02 Javascript
详解AngularJS中module模块的导入导出
2015/12/10 Javascript
jquery mobile 移动web(5)
2015/12/20 Javascript
JS中去掉array中重复元素的方法
2017/05/26 Javascript
webpack4 CSS Tree Shaking的使用
2018/09/03 Javascript
[00:03]DOTA2新版本PA至宝展示
2014/11/19 DOTA
Python中获取网页状态码的两个方法
2014/11/03 Python
在Python下利用OpenCV来旋转图像的教程
2015/04/16 Python
Python中最常用的操作列表的几种方法归纳
2015/04/24 Python
实例探究Python以并发方式编写高性能端口扫描器的方法
2016/06/14 Python
centos6.4下python3.6.1安装教程
2017/07/21 Python
Python中使用支持向量机SVM实践
2017/12/27 Python
利用python在大量数据文件下删除某一行的例子
2019/08/21 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
美国知名的摄影器材销售网站:Adorama
2017/02/01 全球购物
HealthElement海外旗舰店:新西兰大卖场
2018/02/23 全球购物
英国时尚和家居用品零售商:Matalan
2021/02/28 全球购物
俄罗斯家居用品购物网站:Евродом
2020/11/21 全球购物
捐赠仪式主持词
2014/03/19 职场文书
新法人代表任命书
2014/06/06 职场文书
为Java项目添加Redis缓存的方法
2021/05/18 Redis
Python下opencv库的安装过程及问题汇总
2021/06/11 Python
浅析Redis Sentinel 与 Redis Cluster
2021/06/24 Redis
一文带你探究MySQL中的NULL
2021/11/11 MySQL
 Python 中 logging 模块使用详情
2022/03/03 Python
JS前端轻量fabric.js系列物体基类
2022/08/05 Javascript