MXOXW

Life always finds a way.

JavaScript 权威指南-Window对象

| Comments

14.1 计时器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/*
* Schedule an invocation or invocations of f() in the future.
* Wait start milliseconds, then call f() every interval milliseconds,
* stopping after a total of start+end milliseconds.
* If interval is specified but end is omitted, then never stop invoking f.
* If interval and end are omitted, then just invoke f once after start ms.
* If only f is specified, behave as if start was 0.
* Note that the call to invoke() does not block: it returns right away.
*/

function invoke(f, start, interval, end) {
if (!start) start = 0; // Default to 0 ms
if (arguments.length <= 2) // Single-invocation case
setTimeout(f, start); // Single invocation after start ms.
else { // Multiple invocation case
setTimeout(repeat, start); // Repetitions begin in start ms
function repeat() { // Invoked by the timeout above
var h = setInterval(f, interval); // Invoke f every interval ms.
// And stop invoking after end ms, if end is defined
if (end) setTimeout(function() {
clearInterval(h);
}, end);
}
}
}

14.2 浏览器定位和导航
URL分解属性:protocol, host, hostname, port, pathname, search, hash

Extracting arguments from the search string of a URL

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/*
* This function parses ampersand-separated name=value argument pairs from
* the query string of the URL. It stores the name=value pairs in
* properties of an object and returns that object. Use it like this:
*
* var args = urlArgs(); // Parse args from URL
* var q = args.q || ""; // Use argument, if defined, or a default value
* var n = args.n ? parseInt(args.n) : 10;
*/

function urlArgs() {
var args = {}; // Start with an empty object
var query = location.search.substring(1); // Get query string, minus '?'
var pairs = query.split("&"); // Split at ampersands
for (var i = 0; i < pairs.length; i++) { // For each fragment
var pos = pairs[i].indexOf('='); // Look for "name=value"
if (pos == -1) continue; // If not found, skip it
var name = pairs[i].substring(0, pos); // Extract the name
var value = pairs[i].substring(pos + 1); // Extract the value
value = decodeURIComponent(value); // Decode the value
args[name] = value; // Store as a property
}
return args; // Return the parsed arguments
}

14.2.2 载入新的文档
Location对象的assign()方法可以使窗口载入并显示你指定的URL中的文档。replace()方法也类似,但它在载入新文档之前会从浏览历史中把当前文档删除。如果脚本无条件地载入一个新文档,replace()方法可能是比assgin()方法更好的选择。否则,“后退”按钮会把浏览器带回到原始文档,而相同的脚本则会再次载入新文档。如果检测到用户
的浏览器不支持某些特性来显示功能齐全的版本,可以用location.replace()来载入静态的HTML版本。

1
2
3
4
5
6
7
location = "http://www.oreilly.com"; // Go buy some books!
location = "page2.html"; // Load the next page
/**
* #top不存在时,浏览器跳到文档开始处
*/

location = "#top"; // Jump to the top of the document
location.search = "?page=" + (pagenum+1); // load the next page

14.3 浏览历史

1
2
3
4
history.back();
history.forward();
history.go(0);
history.go(-2);

14.4 浏览器和屏幕信息
14.4.1 Navigator对象
4个属性

  • appName
  • appVersion
  • userAgent
  • platform
  • 一下是未标准化的属性
  • onLine //是否连接到网络
  • geolocation //确定用户地理位置的接口
  • javaEnabled() //浏览器可以运行Java小程序是返回true
  • cookiesEnabled() //浏览器可以永久保存cookies时返回true

14.5 对话框
alert()
confirm()
prompt()
showModalDialog()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!--
This is not a stand-alone HTML file. It must be invoked by showModalDialog().
It expects window.dialogArguments to be an array of strings.
The first element of the array is displayed at the top of the dialog.
Each remaining element is a label for a single-line text input field.
Returns an array of input field values when the user clicks Okay.
Use this file with code like this:
var p = showModalDialog("multiprompt.html",
["Enter 3D point coordinates", "x", "y", "z"],
"dialogwidth:400; dialogheight:300; resizable:yes");
-->

<form>
<fieldset id="fields"></fieldset> <!-- Dialog body filled in by script below -->
<div style="text-align:center"> <!-- Buttons to dismiss the dialog -->
<button onclick="okay()">Okay</button> <!-- Set return value and close -->
<button onclick="cancel()">Cancel</button> <!-- Close with no return value -->
</div>
<script>
// Create the HTML for the dialog body and display it in the fieldset
var args = dialogArguments;
var text = "<legend>" + args[0] + "</legend>";
for (var i = 1; i < args.length; i++)
text += "<label>" + args[i] + ": <input id='f" + i + "'></label><br>";
document.getElementById("fields").innerHTML = text;
// Close the dialog without setting a return value
function cancel() {
window.close();
}
// Read the input field values and set a return value, then close
function okay() {
window.returnValue = []; // Return an array
for (var i = 1; i < args.length; i++) // Set elements from input fields
window.returnValue[i - 1] = document.getElementById("f" + i).value;
window.close(); // Close the dialog. This makes showModalDialog() return.
}
</script>

</form>

14.8 多窗口和窗体

14.8.1 打开和关闭窗口

window.open()
window.close()

函数在定义它的作用域中执行,而不是在调用它的作用域中执行

评论