JavaScript:全面解析Ajax跨站数据传输和iframe跨域名js调用

关于跨域名问题的解决实践非常多,今天我就把我所知道的通过几个应用场景来分别总结一下

先说明一点:我说的某某域名在您的控制下的意思是这个域名下的网页由您来负责开发内部的JavaScript

场景一:将bbs.xxx.com的页面用iframe嵌入到www.xxx.com的中,如何在iframe内外使用js通信

一级域名都是xxx.com 这个域名一定是在您的控制下,所以你只要在两个页面中同时升级域名即可

在父窗口和iframe内部分别加上js语句:document.domain=”xxx.com”;

之后2个页面就等于在同一域名下,通过window.parent oIframe.contentDocument就可以相互访问,进行无障碍的JS通信

在新浪、淘宝等很多页面都能找到这样的语句。不过document.domain不可以随便指定,只能向上升级,从bbs.xxx.com升级到yyy.com肯定会出错

场景二:将www.yyy.com的页面用iframe嵌入到www.xxx.com的中,两个域名都在您的控制下,如何在iframe内外进行一定的数据交流

你可以通过相互改变hash值的方式来进行一些数据的通信

这里的实现基于如下技术要点:

1、父窗口通过改变子窗口的src中的hash值把一部分信息传入,如果src只有hash部分改变,那么子窗口是不会重新载入的。

2、子窗口可以重写父窗口的location.href,但是注意这里子窗口无法读取而只能重写location.href所以要求前提是您控制两个域名,知道当前父窗口的location.href是什么并写在子窗口内,这样通过parent.location.href = “已知的父窗口的href”+”#”+hash。这样父窗口只有hash改变也不会重载。

3、上面两步分别做到了两个窗口之间的无刷新数据通知,那么下面的来说如何感知数据变化。标准中没有相关规定,所以当前的任意浏览器遇到location.hash变化都不会触发任何javaScript事件,也就是说您要自己写监听函数来监视loaction.hash的值的变化。做法是通过setTimeout或者setInterval来写一个监听函数每20-100ms查看一下hash是否变化,如果变化了驱动js根据新的数据做想做的事情。

这种实现的一些分析:

1、信息通道是双向的,当然会兼容单向,如果只是父窗口向子窗口通知数据,只需要子窗口写hash监听,反之亦然。

2、局限性也是颇大,因为这种通信的前提是双方知道对方的location.href。如果父窗口带有动态的location.search也就是查询参数,那么子窗口的处理上就比较困难,需要把父窗口的location.search作为传递信息的一部分告知子窗口。

3、另外的困扰会有浏览器带给你,IE之外的浏览器遇到hash的改变会记录历史,这样你在处理前进后退的时候会非常头疼

场景三:将www.yyy.com的页面用iframe嵌入到www.xxx.com的中,只有被嵌入的yyy.com在您的控制下,如何在iframe内外进行一定的交流

真实场景:google adsence的一个需求,你希望google发现您的页面不能匹配出相关性非常好的按点击付费广告时,你希望google的广告iframe能够隐藏。

google的广告iframe在google域下显然不能把自己隐藏掉,那么怎么办呢?

1、google会提供给你一个html页面

2、您将这个页面放置在您的域名下,并告诉google它的位置

3、当google发现没有很好的广告时,会将子窗口的loaction重定向到您的那个页面下,这样您的页面因为同域名就可以访问父页面来隐藏自己了

是不是很巧的方法?

场景四:您是内容发布商,如何改造接口,让其他域名下的页面可以从浏览器端出发获得您的数据

我们知道ajax的xmlHttpRequest()说到底是一个无刷新请求服务器数据的辅助工具,但是xmlHttpRequest并不能跨域名请求数据,在某些情况下成了极大的限制。

但是我们如果通过其他方式完成无刷新请求数据不也可以么,我们用Dom方法操作动态JS脚本请求来做这件事。

//创建一个脚本节点

var oScript = document.createElement(’script’);

//指定脚本src src可以指向任意域名

//注意src不再指向静态js,而是带着查询参数指向一个动态脚本广播服务。

oScript.src = “http://yyy.com/query.php?”+yourQueryString;

//如果指定了charset 同时还可以解决xmlHttpRequest另一大困扰 乱码问题

//oScript.charset = “utf-8″;

//通过Dom操作把这个新的节点加入到文档当中

document.getElementsByTagName(”head”)[0].appendChild(oScript);

这样只要query.php的输出是可执行的javaScript脚本,比如:djsCallBack({jsondata});

当他从服务器返回后就会自动执行,你可以方便的用json方式来做数据传递了。

要注意,您的脚本请求最好带上时间戳,避免浏览器缓存造成取回数据实时性下降。

如果您是数据提供者,您可以要求数据索取者在查询参数中提供回调函数名,比如query.php?callback=myDataHandler&key=…?

这样您就可以根据参数来提供给他myDataHandler({jsondata}),这样不同的数据索取者都会得到自定义的正确的异步回调。

场景五:通过后端程序语言,为了跨域名而做各自的后台数据抓取转化服务,比如php curl,YAHOO CHINA NCP就是用这种方案。

场景六:通过flash proxy,因为flash的跨域调用可以通过crossdomain.xml和security.allowdomain(’*’)文件实现,而js又可以和flash进行通信,所以js完全可以借用flash实现js跨域通信。

总结:

第一种场景,相应的处理办法有这非常好的效果,可以说完全解决了问题。

第二种场景,相应的处理办法具有一定的跨域数据交流功效,具有相当大的局限,并不适合在复杂业务流程中应用,实际上我也确实也没看到过基于此的大规模应用。

第三种场景,相应的处理办法比较巧妙,虽然redirect之后就不干你什么事了,但如果你是google一样面向众多域名的内容提供商,也是个不错的解决思路。

第四种场景,相应的处理办法非常强大,对比Ajax可以看到,跨域名没问题,无刷新没问题,本身又是异步的,JSON比xml快的多,同时解决乱码问题,只是请求都是Get方式的,不能做Post方式的请求。

第五种场景,处理很方便,也很实用。

第六种场景,需要一定的flash基础哈,作用当然非常强大

 

页面html代码规范

标签的使用:

标签使用需要注意的地方:

1.所有标签是属性使用小写字母

2.单标签必须加后反斜杠闭合, img标签必须有alt属性:

常用单标签包括:img、meta、link、input 等标签

如:标准写法 <img src=”http://sina.cn/logo.gif” alt=”手机新浪网” />

不标准写法: <img src=”http://sina.cn/logo.gif” >

h标签:<h1> 用于最顶层的标题,<h2> 和 <h3> 用于较低的层级。参考:http://w3school.com.cn/quality/quality_elements.asp

一、h1 表示页面最顶层的标题,一个页面要有只有一个,与页面的title想呼应

1.频道首页的logo部分(如果方便的话,可以考虑在h1里边写频道名称,用样式替换成logo,如果不方便必须在logo图片的alt 属性里边写上页面标题)

2.栏目页栏目名称/子栏目页子栏目名称

3.专题页的专题名字/子专题页子专题名称

4.其他类型的页面h1就是页面名称

二、h2 表示页面较低层级的标题

1. 频道手的栏目条可使用h2标签,注意栏目条有时可能会包含好几个标题,选择第一个是用h2标签,保证h2中间值包含一个内容

2. 栏目页的子栏目标题可以使用h2标签,h2中只能包含一个标题

3. 专题页,子专题名字可以使用h2标签,h2中只包含一个标题

4. 子专题、子栏目目前都是滚动新闻页,不需要使用h2标签

5. 正文页目前没有相关的子标题,正文页也不需要使用h2标签

三、h3~h6 一般情况下没必要使用

ul/ol 标签:

ul表示的是无序列表,在无序列表的地方使用

ol表示有序列表,比如排行榜之类的地方使用

p标签:

p标签定义段落,说明一段话,在表示一段内容的时候使用

span标签:

span标签表示一小段内容,不可以用来表示太长的内容

style 相关标签:

align,width,height 等一些定义样式的标签都需要用 style来实现

style 标签最最好都写在head里边,如果有些样式必须写在body里边的话,使用style属性写在标签里边

script标签:

scrip 标签的如果不是必须在页面中间出现的话,尽量把scrip标签放在页面最后</body>之前,或者紧跟<body>之后,或者放在head中间。

Script 属性的使用, type=”text/javascript” 可作为必须属性来写,其他 language属性是过时标签,没必要使用,charset属性是在指定了src的时候才添加的,一般可以不用增加这个属性

 

页面结构:

在body的最里边需要有一个最大曾的div,页面的宽度在这个地方来定义,以保证在在body宽度变化的时候不影响页面的样式结构

 

标签嵌套:

标签的嵌套必须按照标签的语义按照从大到小的规律进行嵌套,同级的可以互相嵌套,小的标签不能嵌套大标签

div/form/header/footer/section > p/form > (ol/ul/dl > li/dt/dd) > h1/h2 > span/a > img/input/select/button/textarea

括号中括起来的部分 ul/ol > li 与 dl > dt/dd  上下级不行同时使用不能单独存在

app交叉推广

随着iphone的街机化,App Store 的模式引起了国内外多家厂家的模仿和追随,android应用商店的泛滥,国内各大互联网厂商争先推出自己应用平台。一种新的推广模式也跟着发展起来:交叉推广。

什么是交叉推广?
交叉推广是最近开収者讨论比较多的话题,其实就是 App 之间的互相推荐曝光,通过流量互换的方式来获得更多的自身产品平时无法触及到的独立用户,简称交叉推广。

为什么要做交叉推广?
付费广告、限免、游戏 Review 站点、论坛、社交网站是比较常见的推广方式,但是或多或少都会存在效果不明显和性价比低的问题,交叉推广做为一种资源相对来说,较容易获得、更易操作,而且交换回来的用户质量相对更高一点,对亍类似孤岛的 APP 模式,似乎是一种触及更多用户的行之有效的方式。

什么因素影响交叉推广的效果?

  • 流量,日活跃用户多
  • 位置好,比如用户经常停留的界面内
  • 相关性高,适合玩家口味的游戏推荐戒者介绍

做交叉推广应当注意什么?

1、 不要伡害用户体验,和产品风格一致。体验友好的推广,用户不会那么反感,但强行插入的广告,影响游戏主迚程会把用户赶走。
2、 和优质的合作伙伴换量。好的产品推荐,用户是可以接守的;但是推荐较巩的产品,用户也会不买账。
3、 适当换一些不同的产品做推广,保持新鲜感,也能触及到不同的用户群。
4、流量小,不代表没用,和一些较大的产品做交叉推广时,可以要求先帮他们推一段时间,积攒流量;在你的新版本在新产品上线时,让他们在短时间里帮你集中做推广,效果也比较不错,而这个资源,是你不花钱就可以争取到的。
5、 跟合作伙伴谈交叉推广,可能会花贶一些精力,比如谈合作模式、产品设计、推广时间、位置等等,对亍中小团队来说可控性较巩,而且也通帯没有与人来负责,所以一些第三方的交叉推广平台会是首选。
6、 另外,交叉推广入口上线了,不要放在那就不管了,需要不断的做测试,根据统计数据来分析流量和转化率,也是必不可少的运营手段。