window.open的小技巧分享（转）

今天再次谈起window.open是因为发现了一个比较好玩的小技巧，详细内容我们稍后详细说明。

聊到window.open，不得不说明一下他的使用方法，主要有两种形式：

window.open()没有任何参数，这种方式可以新标签打开页面
window.open(url, name, pars)，带有参数的可以在当前页面打开窗口

详细的使用方法，之前有过介绍，如果想了解，可以点击这里。

知道了如何使用，接下来介绍几个特别的属性和方法（下面所说到的都是同域页面）：

window.open()打开的窗口或者新标签返回窗口的window对象
在新窗口里也可以取到父窗口（执行window.open的环境）的window对象，通过window.opner
window.close()方法可以关闭窗口
window.onunload和window.onbeforeunload事件，监听窗口关闭情况

了解了上面的使用方法之后，介绍一个很巧妙的使用方式。

一共有两个页面：第一个页面(window.open.html)的功能是新开一个窗口，第二个页面(window.close.html)为新开窗口的请求的返回信息，可以在第一个页面中，监听新开窗口请求的数据。下面分别介绍两个页面：

window.open.html页面内容如下：

<!DOCTYPE>

<html>

<head>

<meta charset="utf-8">

<title>window.open小技巧</title>

</head>

<body>

我是窗口：window.open

<button id="openWindow">点击新开窗口</button>

<script type="text/javascript">

(function() {

var openWindowEl = document.getElementById('openWindow');

var newWindow;

var data;

window.windowName = 'window.open';

openWindowEl.onclick = function() {

newWindow = window.open('window.close.php', '_blank', 'width=500,height=500;');

//需要window.close.html js正常执行之后才行

/*setTimeout(function() {

console.log(newWindow.userName);

}, 1000);*/

newWindow.onbeforeunload = function() {

userName = newWindow.windowName;

data = newWindow.data;

}

newWindow.onunload = function() {

alert(userName);

if(data.errno == 0) {

alert(data.errmsg);

}else {

alert(data.errmsg);

}

};

})();

</script>

</body>

</html>

　　window.close.html页面内容如下：

<!DOCTYPE>

<html>

<head>

<meta charset="utf-8">

<title>window新开窗口</title>

</head>

<body>

我是窗口：window.close

<script type="text/javascript">

(function() {

window.windowName = 'window.close';

if(Math.random() > 0.5) {

window.data = {

errno: 0,

errmsg: '成功~'

};

}else {

window.data = {

errno: 1,

errmsg: '数据异常~'

};

}

setTimeout(function() {

//拿到的是父窗口的window

alert(window.opener.windowName);

}, 100);

setTimeout(function() {

window.close();

}, 1000);

})();

</script>

</body>

</html>

通过上面介绍的这种方式可以解决，微博等第三方登录无刷新父页面得知返回状态的需求。同时也是解决跨域请求的一个比较好的方式（安全性不知道如何）。测试小例子

今天就分享这么一个小技巧吧~

http://www.cnblogs.com/xiaoheimiaoer/p/4734977.html

时间： 2024-08-30 05:53:53

window.open的小技巧分享（转）的相关文章

六个常用的Excel小技巧分享

六个常用的Excel小技巧分享 1.自动标出不及格分数假定需用红色字体显示60以下分数,蓝色字体显示60以上分数. Ctrl+1,设置单元格格式→自定义,类型输入框中输入: [蓝色][>=60];[红色][<60] 2.快速输入产品编号如某类产品型号为"ABC-1245",产品型号均有固定前缀"ABC-",大量录入时,可设置单元格免去固定前缀输入. 按Ctrl+1,设置单元格格式→自定义,类型输入框中输入: "ABC-

word表格拆分小技巧分享

word表格拆分小技巧分享 1.拆分表格在word中插入的表格,如果需要拆分成两个,只需要选取某行的单元格,按ctrl+shift+回车键,即可在该行上面添加一个空行. 拆分前拆分后 2.在表格中间插入一行光标放在表格该行后换行符前,按回车即可在下面插入一行. 3.在表格最后添加一行选取表格的最后一个单元格,按tab键即要新增一行. 增加后 4.标题行重复如果想让每一页都显示标题行.选取一行或多行,表格工具 - 布局 - 属性 - 选取"在每页顶端..."

几个Ruby小技巧分享

这篇文章主要介绍了几个Ruby小技巧分享,本文讲解了代码块的序列调用.主要是说array在block中的使用.Hash#fetch.创建代码段的散列等小技巧,需要的朋友可以参考下代码块的序列调用代码如下: def touch_down yield [3, 7] puts "touchdown!" end touch_down do |(first_down, second_down)| puts "#{first_down} yards on the run"

网站建设网页设计小技巧分享

网站建设网页设计小技巧分享.在网站建设的过程中我们会遇到很多问题,我们也会去解决各类问题.无论是网站设计还是代码编写.今天针对网站建设过程中我们会遇到的一些小问题,并给出一些简单的解决办法. Ie6不支持Png格式下的透明.效果图如下: 应用解析:有不少人都会对LOGO进行透明处理以融入head部分的渐变背景. 解决方案:采用JS代码实现或CSS滤镜功能,当然问题也存在部分,导致图片质成像量不高. 小技巧1:将透明的LOGO用高于IE6的浏览器打开网页,然后采用FF的PearlCrescentP

PowerShell使用小技巧分享_PowerShell

如何使用PowerShell修改Host文件下面的命令, 为Host文件添加了一条记录, 让/sps2010/hostheader1/这个url指向server自己. 复制代码代码如下: $url="http://sps2010/hostheader1/" if( (Get-Content $env:windir\System32\drivers\etc\hosts |?{$_ -imatch "\s$url"}) -eq $null){"`n127.

注释PHP和html混合代码的小技巧(分享)_php实例

我们在写php的时候有时候会遇到想要注释一部分的代码,是由html和PHP混合组成的,这时候如果一行一行去分开注释有点麻烦.但是又不敢删掉,这时候我们可以充分利用if语句去进行注释的功能 <?php if (1==2):?> //代码片段 <?php endif;?> 以上就是小编为大家带来的注释PHP和html混合代码的小技巧(分享)全部内容了,希望大家多多支持~ 以上是小编为您精心准备的的内容,在的博客.问答.公众号.人物.课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进

Illustrator实用性很强常用小技巧分享

给各位Illustrator软件的使用者们来详细的分享一下实用性很强的常用小技巧. 技巧分享: 好了, 以上的信息就是小编给各位Illustrator的这一款软件的使用者们带来的详细的实用性很强的常用小技巧分享的全部内容了,各位看到这里的使用者们,小编相信各位现在是那是非常的清楚了吧,希望小编上面的技巧能够给各位带去有用的帮助.

注释PHP和html混合代码的小技巧(分享)

find命令使用的两个小技巧分享