当前的文章分类为: 前端开发

iframe跨域 自适应高度

09

January

2014

跨域问题是由于javascript语言安全限制中的同源策略造成的。出于安全方面的考虑,不允许跨域调用其他页面的对象。

例如:a域名下,www.a.com/index.html需要引用b域名下,www.b.com/quote.html页面,但引用的这个b域名下页面里面内容高度不确定。此时就需要双方技术共同解决,利用iframe和location.hash方法。

在a域名下,添加一个判断页agent.html,添加以下代码:

<script>
function  pseth() {
     var iObj = parent.parent.document.getElementById('iframeB'); //A和main同域,所以可以访问节点
     iObjH = parent.parent.frames["iframeB"].frames["iframeA"].location.hash; //访问自己的location对象获取hash值
     iObj.style.height = iObjH.split("#")[1]+"px"; //操作dom
}
pseth();
</script>

[ 查看全文... ]

EDM邮件 – 制作指南(规范文档)

21

November

2013

EDM(Email Direct Marketing)即:Email营销、电子邮件营销。

专业的EDM邮件发送,是有严格的制作要求的,本指南从格式编码、文字、图片及链接四个方面给出指引,请逐条按照本指南制作您的EDM邮件模板。

格式编码:

1、页面宽度请设定在600到800px以内,长度1024px以内。

2、HTML编码请使用utf-8。

3、HTML代码在15KB以内。(各个邮箱的收件标准不一样,如果超出15KB您的邮件很有可能会进入垃圾箱) [ 查看全文... ]

Grunt插件之LiveReload 实现页面自动刷新,所见即所得编辑

20

November

2013

苦B的前端每次在制作和修改页面时,都有一个特定的三部曲:coding-save-F5。很多时候都希望自己一改东西,页面就能立刻显示,而现在LiveReload就能做到这点。

LiveReload会监控你指定的目录中文件,如果有文件被更改,它就自动触发浏览器刷新页面。但如果你修改的是CSS或者图片,页面内容会即时更新,无需重新加载。这样我们不用每次修改文件后,都要去按下F5刷新页面,而是直接就能显示,有点类似所见即所得的编辑模式,特别适合使用双屏coding的人。另外同时结合Sublime text和Emmet LiveStyle,能提高不少开发效率。

LiveReload安装前的准备工作:

安装Node.jsGrunt,如果第一次接触,可以参考:Windows下安装Grunt的指南和相关说明,根据步骤操作,创建完package.json 和 Gruntfile.js这2个文件就行。

接下来,开始配置LiveReload所需要的环境和相关插件。这里所提供的有两种安装方案,根据自己需求进行选择。 [ 查看全文... ]

Windows下安装Grunt的指南和相关说明

13

November

2013

Grunt基于Node.js,其中 npm 是 Node.js 的包管理器,而Grunt和Grunt插件就通过 npm 安装并管理。

Grunt 0.4.x 必须配合Node.js >= 0.8.0版本使用。

安装Node.js:
Node.js官网,点击INSTALL下载并安装,现在的Node.js会自动安装npm。

安装完成之后,打开命令行,进行后续的操作(开始->输入CMD 或 开始->所有程序 ->命令提示符)。

进入Node.js的安装目录(默认路径为"C:\Program Files\nodejs"):
cd \pro*\nod*
[ 查看全文... ]

新浪微博、腾讯微博、QQ空间、人人网、豆瓣 一键分享API

24

October

2013

新浪微博:
http://service.weibo.com/share/share.php?url=

count=表示是否显示当前页面被分享数量(1显示)(可选,允许为空)
&url=将页面地址转成短域名,并显示在内容文字后面。(可选,允许为空)
&appkey=用于发布微博的来源显示,为空则分享的内容来源会显示来自互联网。(可选,允许为空)
&title=分享时所示的文字内容,为空则自动抓取分享页面的title值(可选,允许为空)
&pic=自定义图片地址,作为微博配图(可选,允许为空)
&ralateUid=转发时会@相关的微博账号(可选,允许为空)
&language=语言设置(zh_cn|zh_tw)(可选)
[ 查看全文... ]

Emmet LiveStyle 介绍和使用方法

08

September

2013

想必听到Emmet(原名:Zen coding)都不太会陌生,它是个能够帮助开发人员高效和快速编写HTML和CSS的插件。

而这次的Emmet LiveStyle,则是个提供“样式实时预览”插件,最大好处就是方便了我们对页面的调试。

不过Emmet LiveStyle目前处于公测阶段,暂时只支持Chrome和Safari浏览器与Sublime Text 2/3的双向修改。并且在官网中提到,它并免费使用,而是有偿使的,即正式版出来后会收费(但相信这个问题难不倒"天朝"...你懂的...)

Emmet LiveStyle的特点:
1. 即时更新(不会重新加载页面,样式修改以后无需保存也能预览);;
2. 多个页面同时预览(例:同时打开多个页面,并且关联到相同的CSS,此时修改该CSS,这些页面都能即时显示修改内容);
3. 双向修改(在Chrome开发者工具和Sublime Text中,只要有一处修改,两个工具的样式都会更改。)
4. 便捷的安装和使用。 [ 查看全文... ]

无觅相关文章插件,快速提升流量