码迷,mamicode.com
首页 > 编程语言 > 详细

《Javascript权威指南》 Web浏览器中的JavaScript

时间:2015-04-13 22:30:30      阅读:144      评论:0      收藏:0      [点我收藏+]

标签:

URL中的JavaScript

 在URL后跟一个javascript:协议限定符,是一种嵌入javascript代码到客户端的方法。这种特殊的协议类型指定URL内容为任意字符串,这个字符串是会被javascript解析器运行的javascript代码。它被当做单独的一行代码,语句之间必须用分号隔开,注释用/**/。javascript:URL能识别的“资源”是转换成字符串的执行代码的返回值。如果代码返回undefined,那么这个资源是没有内容的。

可以在使用常规URL的任意地方:<a>的href属性,<form>的action属性,window的open()方法的参数

Firefox浏览器会执行URL的代码,并使用返回的字符串作为待显示新文档的内容,就像点击一个http:url链接,浏览器会擦出当前文档并显示新文档。如果返回值包含HTML标签,浏览器会像渲染通常载入的等价HTML文档一样渲染。

技术分享

其他浏览器不允许URL覆盖当前文档,会忽略代码的返回值。

 

如果要确保javascript: URL不会覆盖当前文档,可以用void操作符强制函数调用或给表达式赋值undefined。

<a href="javascript:void window.open(‘about:blank‘);">打开空窗口</a>

如果这个URL里没有void操作符,调用window.open()方法返回的值在一些理论会转化为字符串并显示,而当前文档也会被覆盖为包含该字符串的文档。[object Window]

 

书签

书签就是一个保存起来的URL,如果书签是javascript:URL,那么保存起来的就是一小段脚本, 叫做bookmarklet。只要书签不返回值,就可以操作当前显示的任何文档,而不把文档替换成新内容。

代码的单引号是HTML属性的一部分,代码不可以包含单引号

<a href=‘javascript:
    var e = ""; r = ""; /*需要计算的表达式和结果*/
    do {
        /*输出表达式和结果,并要求输入新的表达式*/
        e = prompt("Expression: " + e + "\n" + r + "\n", e); 
        try { r = "Result: " + eval(e);}    /*尝试计算这个表达式*/
        catch(ex) { r = ex; }               /*否则记住这个错误*/
    } while(e)     /*知道没有输入或单击Cancel按钮才会终止*/
    void 0;        /*防止当前文档被覆盖*/ 
‘>
javascript
</a>

 bookmarklet的javascript: URL存在于文档外,可以想象成一种用户扩展或者对其他程序的修改。当用户执行一个bookmarklet,书签里的javascript代码就可以访问全局对象和当前文档的内容,对它们操作

javascript的执行阶段:一,载入文档内容,并执行<script>元素里的代码(包含内联脚本和外部脚本)。脚本通常户按它们在文档的顺序执行。

当文档载入完成,所有脚本执行完后进入第二阶段。这个阶段是异步的,而且由事件驱动的。在事件驱动阶段,web浏览器调用事件处理程序函数来响应异步发生的事件。通常是响应用户输入,还可以由网络活动、运行时间或javascript代码的错误来触发,嵌入在web页面里的javascript:URL也可以被当做是一种事件处理程序。

事件驱动阶段发生的第一件事是load事件,指示文档已经完全载入,并可以操作。在文档载入完成后,只要web浏览器显示文档,事件驱动阶段就会一直持续下去。因为这个阶段是异步的和事件驱动的。

 

同步、异步和延迟的脚本

脚本的执行只在默认情况下是同步和阻塞的。<script>可以有defer和async属性,这可以改变脚本的执行方式。都是布尔属性,没有值。defer属性使得浏览器延迟脚本的执行,直到文档的载入和解析完成,并可以操作。async属性使得浏览器可以尽快执行脚本,不用在下载脚本时阻塞文档解析。如果同时有两个属性,同时支持两者的遵从async

延迟的脚本会按它们在文档的出现顺序执行,异步脚本在它们载入后执行,可能会无序。

 

事件驱动

如果需要为一个事件注册多个事件处理程序函数,或者想写一个可以安全注册事件处理程序的代码模块,就算在另一个模块已经为相同的目标的相同事件注册了一个程序,也需要用到另一种事件处理程序注册技术。

window.addEventListener("load", function() {}, false);

在IE8及之前的浏览器需要用attachEvent();

    //注册函数f,文档载入完成时调用f
    //如果文档已经载入,异步执行它
    function onLoad(f) {
        if (onLoad.loaded) {                                //如果文档已经载入完成
            window.setTimeout(f, 0);                        //将f放到异步队列,尽快执行
            else if(window.addEventListener)
                window.addEventListener("load", f, false);
            else if(window.attachEvent)
                window.attachEvent("load", f);
        }
    }
    //给onLoad设置标志
    onLoad.loaded = false;

 

IE的javascript条件注释

以文本/*@cc_on开头,以文本@*/结束

//IE6 中可以使用
/*
@cc_on @if (@_jscript) // 该代码位于一条JS注释内但在IE中执行 alert("In IE"); @end @*/

 

javascript不能做什么

不支持某些功能

客户端javascript没有权限来写入或删除客户计算机上的任意文件或列出任意目录。

客户端javascript没有任何通用的网络能力。客户端javascript程序可以对HTTP协议编程;并且HTML5有一个附属标准叫WebSockets,定义了一个类套接字的API,用于和指定的服务器通信。但这些API都不允许对范围更广的网络直接访问。通用的Internet客户端和服务器不能同时使用客户端javascript来写。

 

 在支持的功能上做限制

  javascript程序可以关闭自己打开的浏览器窗口,但不允许未经用户确定关闭其他窗口

  HTML FileUpload元素的value属性是只读的,如果可以设置这个属性,脚本能设置它为任意文件名,从而导致表单上传指定文件的内容到服务器。

  脚本不能读取从不同服务器载入的文档的内容,除非这个是包含 该脚本的文档。类似地,一个脚本不能在来自不同服务器的文档上注册事件监听器。这就防止脚本窃取其他页面的用户输入。

 

同源策略

是对javascript代码能够操作哪些web内容的一条完整的安全限制。当web页面使用多个<iframe>或打开其他浏览器窗口时,它通常发挥作用。这时同源策略负责管理窗口或窗体的javascript代码以及其他窗口或帧的交互。具体来说,脚本只能读取和所属文档来源相同的窗口和文档属性

以下文档的来源不同

  从不同web服务器

  同一主机的不同端口

  使用http:协议和使用https协议

脚本本身的来源和同源策略不相关,相关的是脚本所嵌入的文档的来源。

 

不严格的同源策略

document对象的domain属性。默认domain存放的是载入文档的服务器的主机名。字符串必须具有有效的域前缀或它本身。domain值必须有点号

跨域资源共享。用Origin:请求头和Access-control-allow-Origin响应头来扩展HTTP。它允许服务器用头信息列出源,或用通配符匹配所有的源并允许由任何地址请求文件。

跨文档信息。允许来自一个文档的脚本可以传递文本消息到另一个文档里的脚本。 

 

跨域脚本

攻击者向目标站点注入HTML表情或脚本。

 

《Javascript权威指南》 Web浏览器中的JavaScript

标签:

原文地址:http://www.cnblogs.com/surahe/p/4419410.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!