web on Random Stuff from GlacJAY

vue 集成 iframe

Sun, 07 Jan 2018 14:09:22 +0800

书接上回：最近不是在用 vue 开发 H5 App 嘛（再后来又加上了 react-native 😂，这个以后有机会说），我们有个接口返回的是 HTML 页面，在原来的原生 App 里面自然是用个 WebView 控件来展示啦，但我们现在整个应用都是 H5 了，HTML 里面嵌另一个 HTML，那第一反应自然就是 iframe 啰。

PS. H5 里面是嵌不了原生控件的对吧？react-native 是可以的，有时确实是要方便一些的……吧

PSS. 除了 iframe 之外呢，最近好像还有一个比较新的标准是 web components，也是用来做内嵌的吧，但对浏览器的版本要求应该比较高（虽然也是有 polyfill 的啦），记得我当时好像也是试了一下的，但是没成功 😂，也不记得是啥问题了，而且 iframe 也能满足要求啦，所以就没弄这个了。回头有机会再研究下吧。

如果只是简单的页面展示的话，直接通过 <iframe> 控件的 :src 属性绑定页面 URL 就完事啦。

但我们这是个 App 嘛，页面里面也是有一些可交互元素的，比如点击跳转到详情页之类的，这时就要绑定 <iframe> 的 @load 事件（vue 写法，对应于 JS 接口里面的 onload 事件），示例代码如下：

要点：

第 15 行：在 @load 事件回调方法 onIframeLoad 中，iframe 控件本身可以从 event.target 中得到，不需要用 vue 的 ref 之类的。
第 16 行：要从 iframe 页面中访问外部提供的接口，可以通过发送 message 事件来实现，那么在外部的 HTML 环境中就要通过 window.addEventListener() 来设置对该事件的监听函数。这里的 window 对象就是 iframe 外部 vue 所在的浏览器对象。
第 17 行：从外部访问 iframe 本身的 window 对象就是通过 iframe.contentWindow 来得到，而调用该对象的 eval 方法就是从外部对 iframe 进行操作的一般方法了。该方法接受一个字符串参数，可以传入一段完整的 JS 代码，这时用 JS 新特性 template literals 来传这个参数就会很舒服了，既支持多行，又支持内嵌表达式，可以传点儿参数进去。
第 18 行：耶，服务端返回回来的页面自带 ~~jQuery~~ zepto，这让我们的字符串小脚本好写很多啦。不过要注意：由于这段脚本是要直接在 iframe 所在的浏览器环境（WebView）里面跑的，而不是像外面的 vue 会先经过 babel 的编译（因为用了 .vue 格式嘛），所以最好不要用那些个比较新的语法，比如这里就没有用 () => {} 的匿名函数写法（因为……我也懒得查啦，而且手机的 WebView 兼容性嘛，你懂的 😏）。
第 19 行：在 iframe 环境中，window.parent 就是其外部环境的 window 对象啦，调用其 postMessage 方法就可以往外边发 message 事件了，所传参数会最终变成该事件的 data 字段。
第 30 行：最终接收到 iframe 传出来的 message 事件，然后就……该干嘛干嘛啰。

OK，以上就是本次的 vue 集成 iframe 并实现互操作的方法总结啦。

quasar 开发中的跨域问题

Mon, 18 Dec 2017 23:30:22 +0800

最近在用 vue 三件套 + quasar 开发 hybrid app，遇到了一个跨域问题，简单记录一下。

LoadRunner 中进行 HTTP 测试时使 Keep-Alive 生效的注意事项

Thu, 19 Jun 2014 00:23:16 +0800

工作需要，在使用 LoadRunner 进行 HTTP 测试时，为了使每个虚拟用户在不同的循环周期中都能保持长连接，则除了要打开 Keep-Alive 运行时配置（默认打开）之外，还有两个选项需要修改，这两个选项都在运行时配置的「Browser - Browser Simulation」中：

Simulate browser cache ：取消勾选。禁用对浏览器缓存机制的模拟，令虚拟用户确实的每次都真正发起与 Web 服务器的对话，而不是只读取一下缓存。
Simulate a new user on each iteration ：取消勾选。不要在每次执行 Action 之前重置虚拟用户的状态，不然会把原来的 TCP 长连接也重置掉，Keep-Alive 就没用了（更准确地说，是在不同循环周期之间就没用了）。

编写自己的 Web 版 Google Reader 客户端

Thu, 11 Aug 2011 00:00:00 +0000

最近花在路上的时间明显变多了，手机就成了我打发这些路上时间的利器。小说神马的看太多也会腻，正好 Google Reader 中也积累了大量的未读文章，因此用手机看看订阅文章就成了一个比较好的选择。

但多次使用下来，却也发现了很多 Google 原版 Web 界面的不方便之处。Google 提供了两个版本的 Reader 界面给手机，一个是苹果风格的 /i/ 界面，设计得很漂亮，功能也很全，用 Nokia 手机也能看，但太费流量（未证实，只是感觉，大概是因为一次加载了很多的文章吧），而且在网络状况不好的时候，体验不太好。另一个是 /m/ 界面，很简洁，选项不多，但也总有些这样那样的细节另我不太满意，下面详述。然后又去找 Nokia 的 S60v3 客户端软件，总之是没一个喜欢啦。作为一个 Geek （至少是自称），在这种情况下，最佳选择自然就是打造一个自己专属的解决方案啦。

正好蹭着同学的一个 PHP 空间（其实也有 Python 和 Ruby 可选啦，但总觉得会很折腾，还是 PHP 好点，虽然折腾也少不了，见下），于是花了几天时间，连复习 PHP （以前只学过没用过，主要还是看 w3schools 的教程和查 php.net 的函数文档）、研究 OAuth （参见这篇文章，不过 Web 应用稍有不同）、研究 Google Reader API （参见这系列文章）、编写代码，终于搞定了一个很阳春的 Google Reader Mobile 版，刚刚满足我的手机阅读需要。