JavaScript弹出窗口以及窗口间的通信

我们可以利用JavaScript穿件弹出窗口，并且可以控制它的许多属性，甚至还可以在两个窗口之间通信。

本网页JavaScript代码

本网页JS，只有一个函数，它负责打开一个300*300的网页。

<script type="text/javascript">
	function test(){
		window.open('04_popup_test.html','popup','width=300,height=300')
	}
</script>

HTML代码

<form action="#">
<button onclick="test(); return false;" value="test" >点击测试</button>
</form>

效果

弹出网页JavaScript代码

弹出网页JS，首先，可以使用window.opener来引用打开父网页的window，再用location输出它的地址。最后有一个函数，可以利用它改变父网页的背景颜色。我们还可以做很多事情，这只是一个JavaScript窗口间通信的小例子。

<script type="text/javascript">
	farther = window.opener;
	document.write(farther.location);
	function changeFarther(){
		farther.document.getElementById('content').style.backgroundColor = "yellow";
	}
</script>

HTML代码

<button onclick="changeFarther(); return false;">设置背景颜色</button>

想了解更多的弹出窗口参数可以访问quirksmode.org/js/popup.html#arg。

  1. 用javascript修改html元素的class
  2. JavaScript重定向
  3. JavaScript对象当作关联数组
  4. JavaScript弹出窗口以及窗口间的通信
  5. JavaScript显示信息实例
  6. 用JavaScript批量访问HTML元素
  7. 分离JavaScript与HTML
  8. JavaScript计算器实例
  9. JavaScript的Math对象计算器
  10. JavaScript改变HTML元素的位置
  11. JavaScript动画
  12. JavaScript动画函数
  13. JavaScript拖拽
  14. JavaScript拖拽2——多元素、分离JS
  15. JavaScript拖拽3——解决快速拖拽的问题
  16. addEventSimple函数，添加事件响应函数的方法
  17. addEventSimple观察鼠标事件
  18. JavaScript click事件深入
  19. JavaScript事件来源元素
  20. JavaScript修改与访问CSS
  21. JavaScript拖拽4——获得元素的位置
  22. JavaScript拖拽5——性能优化
  23. DOM Scripting相册
  24. DOM Scripting斑马表格
  25. DOM Scripting动画切图
  26. JavaScript颜色渐变
  27. JavaScript拖拽6——修复错误