为Iframe注入脚本的不同方式比较

DOM HTML JavaScript jQuery iframe

最近在开发天码营前端预览工具(类似JSFiddle), 需要将CSS、HTML与JavaScript一起注入到ifame中。 借此研究一下iframe中注入脚本的不同方式之间的区别。

访问iframe内容

在父窗口中可以通过iframe DOM节点获取其windowdocument(需要同域)。 获取iframe的window对象(所有全局变量、函数都在该对象下):

var iframe = $('iframe').get(0);
var iwindow = $('iframe').prop('contentWindow');
// 相当于
var iwindow = document.getElementsByTagName('iframe')[0].contentWindow;

获取iframe的document有两种写法:

var idocument = $('iframe').prop('contentDocument');
// 相当于
var idocument = $('iframe').prop('contentWindow').document;

contentDocument属性在 IE 8 才开始支持,为了支持 IE 7,推荐使用contentWindow.document

HTTP 表单编码 enctype

HTML HTTP JSON XML 表单

在web开发中最常见的莫过于GET和POST,其中GET一般将参数编码在url中(HTTP header)来传递数据; 而POST或PUT数据必须放在消息主体(entity-body)中,这样的数据便是HTTP表单,表单数据的编码方式应在HTTP头中进行设置(Content-Type header字段),常见的编码方式有(HTTP采用MIME框架,编码方式可以是任何MIME类型):

  1. URLencoded: application/x-www-form-urlencoded
  2. Multipart: multipart/form-data
  3. JSON: application/json
  4. XML: text/xml
  5. 纯文本: text/plain

在Web开发中,前三种格式非常常见。HTML中<form>支持urlencoded,multipart,plain text,通过enctype属性来进行设置。AJAX中默认的则是JSON编码格式。

jQuery2.2 iframe 脚本注入的上下文 Bug

DOM JavaScript jQuery 作用域 iframe

最近在iframe中注入脚本,发现jQuery.append()方法和DOMappendChild()方法的区别:

  • DOM APIappendChild()方法插入的<script>会在iframe所在上下文中运行
  • jQuery(2.2).append()方法注入的<script>脚本,其执行上下文总是在当前window

事实上,jQuery.append()方法对<script>做了特殊处理: 获取脚本内容并通过eval()在当前作用域下执行,同时禁用了浏览器默认的脚本调度执行。

Socket.IO 订阅 Redis Channel

Node.js Redis Socket.IO NPM

在Node.js程序中,可以借助Socket.IO来构建实时应用。 然而有时候后台与Socket.IO是异构的,比如Java、Python的Web后台。 这时可以利用Redis的订阅/发布机制作为中转,连接异构的后台和Socket.IO服务。 本文介绍如何在Socket.IO中订阅Redis Channel。

至于如何在Java/Python/C#中发布消息到Redis Channel,请参照对应语言的Redis SDK。

Github Pages (Jekyll) 自动生成文章标签

Bash Github Vim grep awk sed JSON Jekyll

在Github Pages上写博客快三年了,为文章添加标签一直是一件困难的事情。 由于Harttle一直在Unix+Vim做开发和写博客, 所以写了一个『Bash脚本』来为文章生成标签列表, 并为Jekyll项目写了一点『Vim插件』,以便在编辑文章时一键生成标签。

为什么需要生成标签?

并不是所有人都有这样的困惑。对我来讲Jekyll最不方便之处就是『为文章添加标签』。 原因有二:

  1. 标签名不统一。同样的标签经常会因大小写、中英文、连字符等原因被识别为不同标签。
  2. 提取标签困难。写完文章后需要仔细挑选标签,并参考以往的文章标签, 这一过程在标签变多时非常困难。

用怎样的策略生成标签?

既然这件事情一定要自动化,那么用怎样的逻辑生成标签呢? 想到提取标签,第一印象便是统计词频。 然而词频最高的词语往往是语言表述相关的东西,但它们不是文章的重点。 下面将会看到我们需要一个标签库、一个Bash脚本、再加一个Vim插件。

寻找并删除Git记录中的大文件

Shell Git Github awk grep

最近发现HarttleLand的Git仓库已经达到了142M,严重影响Fork和Clone。 今晨Harttle从Git记录中定位了数百个大文件并将其删除,现在仓库恢复了27M的大小。 借此机会,本文来介绍查找和重写Git记录的命令:git rev-list, git filter-branch。 本文用于学习用途,生产环境请考虑使用 bfg 等效率工具(感谢 oott123 的评论)。

CSS控制表格样式

CSS Chrome HTML 伪类 选择符

表格是HTML中用来显示比较密集的信息,在HTML早期就有支持。 表格的HTML标记较其他元素复杂很多,浏览器也为<table>标签提供了不少默认样式, 所以表格的排版行为也较为复杂。 本文讨论了表格的边框模型,以及如何利用CSS3设置条纹样式和视觉反馈。

导航: 上一页 下一页

加载中...

🔝