1.bom.html

<html>
	<head>
		<title>bom演示</title>
		<script type="text/javascript" src="js/bom.js"></script>
	</head>
	<body>
		<div id = 'd1'>第一个div</div>
		<div id = 'd2'>第二个div</div>
		<a href="javascript:test();">测试</a></br>
		<a href="javascript:testTimeout();">测试setTimeout</a></br>
		<a href="javascript:testSetInterval();">测试setInterval</a></br>
		<a href="javascript:stopInterval();">停止Interval</a></br>
		<a href="javascript:alert(document.links.length);">多少个link?</a></br>
		<a href="javascript:alert(document.links[0]);">第一个link的地址</a></br>

		<a href="javascript:changeHtml();">改变第一个div的内容为“基本上为主”</a></br>

	</body>
</html>

  

2.child.html

<html>
	<head>
		<title>子窗口</title>
		<script type="text/javascript" src="js/bom.js"></script>
	</head>
	<body>
		<a href="javascript:alert(window.opener.msg);">子窗口访问父窗口的变量</a>
	</body>
</html>

  

3.bom.js

//alert(window);
//alert(window.document);
//alert(window.document.links);
//alert(window.document.anchors);
//alert(window.document.forms);
//alert(window.document.location);

function test(){

	//恶搞
	/*
	while(1 > 0){
		window.moveTo(Math.random()*1000, Math.random()*100);
		//window.moveBy(400, 600);
	}
	*/

	//alert(window.screenX);

	//alert(window.self);

	//window.open('child.html', 'topFrame');

	var kti = 99888;
	alert(window.kti);
}

window.msg = '父窗口变量';

//测试setTimeout
function sayHello(){
	alert('hello!');
	//return function(){alert('hello!')};
}

function testTimeout(){
	window.setTimeout(sayHello, 2000);
	//window.setTimeout(sayHello(), 2000);
}

//测试setInterval
var t;
function testSetInterval(){
	t = window.setInterval(sayHello, 1000);
}

function stopInterval(){
	window.clearInterval(t);
}

//改变html内容
function changeHtml(){
	var k = document.getElementById('d1');
	alert(k);
	k.innerHTML = '基本上为主';
}

  

1.BOM学习的更多相关文章

  1. javascript基础学习(十二)

    javascript之BOM 学习要点: 屏幕对象 History对象 Location对象 一.屏幕对象 Screen对象是一个由javascript自动创建的对象,该对象的主要作用是描述客户端的显 ...

  2. javascript基础学习(十一)

    javascript之BOM 学习要点: BOM介绍 Window对象 一.BOM介绍 浏览器对象模型简称为BOM(Brower Object Model),BOM由很多对象构成,对象与对象之间有着相 ...

  3. 一步步学习javascript基础篇(7):BOM和DOM

    一.什么是BOM.什么是DOM BOM即浏览器对象模型,主要用了访问一些和网页无关的浏览器功能.如:window.location.navigator.screen.history等对象. DOM即文 ...

  4. JavaScripts学习日记——BOM

    IE 3.0 和 Netscape Navigator 3.0 提供了一种特性 - BOM(浏览器对象模型),可以对浏览器窗口进行访问和操作.使用 BOM,开发者可以移动窗口.改变状态栏中的文本以及执 ...

  5. JavaScript学习总结(一)——ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)

    一.JavaScript简介 JavaScript是一种解释执行的脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它遵循ECMAScript标准.它的解释器被称为JavaScript引 ...

  6. javascript学习之BOM

    BOM是browser object model的缩写,简称浏览器对象模型.先看看下面这张图 window对象是BOM的顶层(核心)对象,所有对象都是通过它延伸出来的,也可以称为window的子对象. ...

  7. JavaScript高级程序设计学习笔记--BOM

    window对象 BOM的核心对象是window,它表示浏览器的一个实例.在浏览器中,window对象有双重角色,它既是通过JavaScript访问浏览器窗口的一个接口,又是ECMScript规定的G ...

  8. Javascript学习笔记3 Javascript与BOM简介

    什么是BOM BOM是browser object model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象 ...

  9. JavaScript学习笔记之BOM

    BOM的核心对象是window,它既表示浏览器窗口以及页面可见区域,同时也是ECMAScript中的Globe对象,所有的全局变量和函数都是它的属性,并且所有的原声函数以及其他函数也都存在于它的命名空 ...

随机推荐

  1. web工程常用路径的获取方法

    此文章是基于 搭建SpringMVC+Spring+Hibernate平台 一. 利用 Spring 取得web工程根路径 1. web.xml 中添加如下: <context-param> ...

  2. Cesium应用篇:1快速搭建

    范例中所有范例可以在Github中搜索:ExamplesforCesium Cesium ['siːzɪəm]是一款开源的JavaScript开源库,开发者通过Cesium,实现无插件的创建三维球和二 ...

  3. Linux下查看所有CPU核心使用率的方法

    两种方法: 1.方法一: sar -P ALL 查看历史CPU使用率: sar -f /var/log/sa/sa01 2.方法二: mpstat -P ALL

  4. Kruskal算法java版

    /** * sample Kruskal.java Description: * kruskal算法的思想是找最小边,且每次找到的边不会和以找出来的边形成环路,利用一个一维数组group存放当前顶点所 ...

  5. [转载]我们可以用SharePoint做什么

    前言 不知不觉作为一个SharePoint的开发人员若干年了,从SharePoint API开始学习,到了解SharePoint的结构,逐渐一点点了解sharepoint的体系:从SharePoint ...

  6. sqlite3之基本操作(一)

    简单的介绍 SQLite数据库是一款非常小巧的嵌入式开源数据库软件,也就是说没有独立的维护进程,所有的维护都来自于程序本身.它是遵守ACID的关联式数据库管理系统,它的设计目标是嵌入式的,而且目前已经 ...

  7. 在WebApi中实现Cors访问

    Cors是个比较热的技术,这在蒋金楠的博客里也有体现,Cors简单来说就是“跨域资源访问”的意思,这种访问我们指的是Ajax实现的异步访问,形象点说就是,一个A网站公开一些接口方法,对于B网站和C网站 ...

  8. svn 中 版本回退

    譬如有个文件,有十个版本,假定版本号是1,2,3,4,5,6,7,8,9,10. Revert to this revision: 如果在版本6这里点击“Revert to this revision ...

  9. devexpress中如何绑定ASPxTreeList控件

    效果图: //前端控件代码: <dx:ASPxTreeList ID="Tree_Gooslist" AutoGenerateColumns="False" ...

  10. 使用MySQL中的EXPLAIN解释命令来检查SQL

    我们看到许多客户的系统因为SQL及数据库设计的很差所以导致许多性能上的问题,这些问题不好解决,但是可以采用一套简单的策略来检查生产系统,发现并纠正一些共性问题. 很显然,您应该尽最大努力设计出最好的数 ...