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 计算当天是本年本月的第几周
Mar 22 Javascript
jQuery find和children方法使用
Jan 31 Javascript
六款帮助你实现惊艳视差滚动效果的jQuery插件
Sep 14 Javascript
JavaScript中几个重要的属性(this、constructor、prototype)介绍
May 19 Javascript
javascript 上下banner替换具体实现
Nov 14 Javascript
jQuery简单实现隐藏以及显示特效
Feb 26 Javascript
this,this,再次讨论javascript中的this,超全面(经典)
Jan 05 Javascript
关于JS中二维数组的声明方法
Sep 24 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
Dec 25 Javascript
vue2.0全局组件之pdf详解
Jun 26 Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
用队列模拟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 无限级 SelectTree 类
2009/05/19 PHP
PHP stream_context_create()作用和用法分析
2011/03/29 PHP
PHP中使用CURL伪造来路抓取页面或文件
2011/05/04 PHP
php实现使用正则将文本中的网址转换成链接标签
2014/12/03 PHP
php获取数据库结果集方法(推荐)
2017/06/01 PHP
JS 巧妙获取剪贴板数据 Excel数据的粘贴
2009/07/09 Javascript
javascript concat数组累加 示例
2009/09/03 Javascript
JavaScript 设计模式 富有表现力的Javascript(一)
2010/05/26 Javascript
JS无法捕获滚动条上的mouse up事件的原因猜想
2012/03/21 Javascript
JSON取值前判断
2014/12/23 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
2015/08/21 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
2016/08/30 Javascript
理解 Node.js 事件驱动机制的原理
2017/08/16 Javascript
微信小程序自定义模态对话框实例详解
2017/08/16 Javascript
原生JS进行前后端同构
2018/04/22 Javascript
JS实现的RC4加密算法示例
2018/08/16 Javascript
详解js常用分割取字符串的方法
2019/05/15 Javascript
python绘制多个曲线的折线图
2020/03/23 Python
pycharm在调试python时执行其他语句的方法
2018/11/29 Python
python进行TCP端口扫描的实现
2018/12/21 Python
Python TKinter如何自动关闭主窗口
2020/02/26 Python
Python多线程操作之互斥锁、递归锁、信号量、事件实例详解
2020/03/24 Python
浅谈keras2 predict和fit_generator的坑
2020/06/17 Python
泰国办公用品购物网站:OfficeMate
2018/02/04 全球购物
UGG英国官方网站:UGG UK
2018/02/08 全球购物
婚礼证婚人证婚词
2014/01/13 职场文书
应届毕业生简历自我评价
2014/01/31 职场文书
财务支持类个人的自我评价
2014/02/14 职场文书
反对四风问题自我剖析材料
2014/09/29 职场文书
岗位竞聘报告范文
2014/11/06 职场文书
保护校园环境倡议书
2015/04/28 职场文书
python四种出行路线规划的实现
2021/06/23 Python
vue+element ui实现锚点定位
2021/06/29 Vue.js
Python爬虫网络请求之代理服务器和动态Cookies
2022/04/12 Python
Python探索生命起源 matplotlib细胞自动机动画演示
2022/04/21 Python
oracle数据库去除重复数据
2022/05/20 Oracle