https://github.com/kumavis/iframe-stream/blob/master/test/rebundle.js

iframe-stream-其实就是将iframe打包成流

Create a stream around an iframe via post-message-stream

  1. const IframeStream = require('iframe-stream').IframeStream
  2.  
  3. var iframe = createIframe()
  4. var iframeStream = IframeStream(iframe)

Note

  • Setup the stream immediately, so we don't miss the iframe's load event.
  • The IframeStream will buffer all input until the childstream is ready.
  • This is an object stream, and buffers will not be handled gracefully.

Example

Here is an example using dnode to create a callback based API with a javascript context inside an iframe.

Parent:

  1. const IframeStream = require('iframe-stream').IframeStream
  2. const Dnode = require('dnode')
  3.  
  4. var iframe = createIframe()
  5. var iframeStream = IframeStream(iframe)
  6. var dnode = Dnode()
  7. dnode.on('remote', function(child){
  8. child.doAsyncSomething(function(){
  9. console.log('child finished doing the thing!')
  10. })
  11. })
  12.  
  13. dnode.pipe(iframeStream).pipe(dnode)

Child:

  1. const ParentStream = require('iframe-stream').ParentStream
  2. const Dnode = require('dnode')
  3.  
  4. var parentStream = ParentStream(iframe)
  5. var dnode = Dnode({
  6. doAsyncSomething: function (cb) {
  7. console.log('doing something async...')
  8. cb()
  9. }
  10. })
  11.  
  12. dnode.pipe(parentStream).pipe(dnode)
 
源码实现:
  1. var PostMessageStream = require('post-message-stream')
  2.  
  3. /*
  4. IframeStream starts corked until it gets a message from the iframe
  5. ParentStream starts uncorked
  6. */
  7.  
  8. module.exports = {
  9. IframeStream: IframeStream,
  10. ParentStream: ParentStream,
  11. }
  12.  
  13. function IframeStream(iframe) {
  14. if (this instanceof IframeStream) throw Error('IframeStream - Dont construct via the "new" keyword.')
  15. return new PostMessageStream({
  16. name: 'iframe-parent',
  17. target: 'iframe-child',
  18. targetWindow: iframe.contentWindow,
  19. })
  20. }
  21.  
  22. //
  23. // Parent Stream
  24. //
  25.  
  26. function ParentStream() {
  27. if (this instanceof ParentStream) throw Error('ParentStream - Dont construct via the "new" keyword.')
  28. return new PostMessageStream({
  29. name: 'iframe-child',
  30. target: 'iframe-parent',
  31. targetWindow: frames.parent,
  32. })
  33. }
 
下面实例实现:
先将插件安装下来:
  1. npm install iframe --save
  2. npm install iframe-stream --save
  3. npm install dnode --save
 
index.js
  1. const test = require('tape')
  2. const Iframe = require('iframe')
  3. const from = require('from')
  4. const pipe = require('mississippi').pipe
  5. const IframeStream = require('../').IframeStream
  6. const rebundle = require('./rebundle')
  7. const htmlWrap = require('./htmlWrap')
  8. const iframeContent = htmlWrap(rebundle(require('./frame')))
  9.  
  10. // setup iframe
  11. var iframe = Iframe({
  12. body: iframeContent,
  13. container: document.body,
  14. }).iframe
  15. var iframeStream = IframeStream(iframe)
  16.  
  17. test(function(t) {
  18. var data = [, , , , , , , , ]
  19.  
  20. t.plan(data.length)
  21.  
  22. pipe(
  23. from(data),
  24. iframeStream
  25. )
  26.  
  27. // create a test for each datum
  28. // this is because these streams never close
  29. eachOutput(iframeStream, data.map(function(datum){
  30. return function onResult(result){ t.equal(result, datum * , 'datum was doubled correctly') }
  31. }), function onDone(){
  32. t.end()
  33. })
  34.  
  35. })
  36.  
  37. function eachOutput(stream, handlers, cb) {
  38. var index =
  39. if (!handlers.length) return cb()
  40. stream.once('data', handleChunk)
  41. function handleChunk(data){
  42. var fn = handlers[index]
  43. fn(data)
  44. index++
  45. if (!handlers[index]) return cb()
  46. stream.once('data', handleChunk)
  47. }
  48. }

htmlWrap.js

  1. module.exports = htmlWrap
  2.  
  3. function htmlWrap(src){
  4. return '<'+'script type="text/javascript"'+'>'+src+'<'+'/script'+'>'
  5. }

rebundle.js

  1. //
  2. // Extraced from WebWorkify
  3. // https://github.com/substack/webworkify/blob/master/index.js
  4. //
  5.  
  6. var bundleFn = arguments[];
  7. var sources = arguments[];
  8. var cache = arguments[];
  9.  
  10. var stringify = JSON.stringify;
  11.  
  12. module.exports = function (fn, options) {
  13. var wkey;
  14. var cacheKeys = Object.keys(cache);
  15.  
  16. for (var i = , l = cacheKeys.length; i < l; i++) {
  17. var key = cacheKeys[i];
  18. var exp = cache[key].exports;
  19. // Using babel as a transpiler to use esmodule, the export will always
  20. // be an object with the default export as a property of it. To ensure
  21. // the existing api and babel esmodule exports are both supported we
  22. // check for both
  23. if (exp === fn || exp && exp.default === fn) {
  24. wkey = key;
  25. break;
  26. }
  27. }
  28.  
  29. if (!wkey) {
  30. wkey = Math.floor(Math.pow(, ) * Math.random()).toString();
  31. var wcache = {};
  32. for (var i = , l = cacheKeys.length; i < l; i++) {
  33. var key = cacheKeys[i];
  34. wcache[key] = key;
  35. }
  36. sources[wkey] = [
  37. Function(['require','module','exports'], '(' + fn + ')(self)'),
  38. wcache
  39. ];
  40. }
  41. var skey = Math.floor(Math.pow(, ) * Math.random()).toString();
  42.  
  43. var scache = {}; scache[wkey] = wkey;
  44. sources[skey] = [
  45. Function(['require'], (
  46. // try to call default if defined to also support babel esmodule
  47. // exports
  48. 'var f = require(' + stringify(wkey) + ');' +
  49. '(f.default ? f.default : f)(self);'
  50. )),
  51. scache
  52. ];
  53.  
  54. var workerSources = {};
  55. resolveSources(skey);
  56.  
  57. function resolveSources(key) {
  58. workerSources[key] = true;
  59.  
  60. for (var depPath in sources[key][]) {
  61. var depKey = sources[key][][depPath];
  62. if (!workerSources[depKey]) {
  63. resolveSources(depKey);
  64. }
  65. }
  66. }
  67.  
  68. var src = '(' + bundleFn + ')({'
  69. + Object.keys(workerSources).map(function (key) {
  70. return stringify(key) + ':['
  71. + sources[key][]
  72. + ',' + stringify(sources[key][]) + ']'
  73. ;
  74. }).join(',')
  75. + '},{},[' + stringify(skey) + '])'
  76. ;
  77.  
  78. return src
  79. }

frame.js

  1. const BrowserStdout = require('browser-stdout')
  2. const ParentStream = require('../index.js').ParentStream
  3. const transform = require('mississippi').through
  4. const pipe = require('mississippi').pipe
  5.  
  6. module.exports = setupStream
  7.  
  8. setupStream()
  9.  
  10. function setupStream(opts) {
  11. var iframeStream = ParentStream()
  12. pipe(
  13. iframeStream,
  14. transform({ objectMode: true }, doubleIt),
  15. iframeStream
  16. )
  17. }
  18.  
  19. function doubleIt(chunk, encoding, cb){
  20. cb(null, chunk * )
  21. }

上面的例子是iframe-stream作者写的一个测试test

metamask-iframe-stream,没成功的更多相关文章

  1. LODOP判断没成功发送任务-重打一下

    一般情况下打印执行了PRINT()或PRINTA(),就会加入打印机队列,如果打印机脱机,就会在队列里排队,当打印机连上并取消脱机的时候,正在排队的任务就会打出,所以一般建议用是否加入队列来判断打印成 ...

  2. 宝塔https部署没成功的原因排查

    今天ytkah在迁移一个客户网站的时候出了点问题,网站从旧的服务器(windows)换到新的服务器(阿里云centos 7,已经安装了宝塔面板),网站之前有用comodo的ssl证书,因为快要过期了, ...

  3. Running a Remote Desktop on a Windows Azure Linux VM (远程桌面到Windows Azure Linux )-摘自网络(试了,没成功 - -!)

                              A complete click-by-click, step-by-step video of this article is available ...

  4. [archlinux][plasma][screensaver] plasma5配置屏保程序,没成功(-_-#)

    plamsa用了好久,一直没有屏保.我想要玄酷的屏保! 用xscreensaver, 之前用FVWM2的时候,就用过了,很玄酷. 一,安装 pacman -S xscreensaver 二,配置 xs ...

  5. Ubuntu 16.04安装Mac OS 12虚拟机资源(没成功,但资源还是可以用)

    整理的Mac OS 12虚拟机资源.装虚拟机基本是按这样的套路: 1.先装VM 2.破解VM使其支持Mac OS 12,这个脚本基本是全平台支持,可以看里面的教程文档. 3.用镜像安装系统. 资源: ...

  6. MetaMask/zero-client

    https://github.com/MetaMask/zero-client MetaMask ZeroClient and backing iframe service architecture ...

  7. iframe高度自动随着子页面的高度变化而变化(不止要在iframe标签里加上this.height=this.contentWindow.document.body.scrollHeight)

    最近使用iframe整合页面遇到一些难题,走了很多弯路才解决,借此记录一下: 1 <!-- 页面主体内容 --> 2 <div class="iframe-wrapper& ...

  8. 原生XMLHTTPResponse,jQuery-Ajax 上传文件;iframe上传图片&预览;图片验证码小案例

    原生AJAX Ajax主要就是使用 [XmlHttpRequest]对象来完成请求的操作,该对象在主流浏览器中均存在(除早起的IE),Ajax首次出现IE5.5中存在(ActiveX控件) 1.Xml ...

  9. iframe编程的一些问题

    前几天做一个用iframe显示曲线图的demo,发现对iframe的contentDocument绑定 onclick事件都无效,而在页面中对iframe.contentDocument的onclic ...

随机推荐

  1. NavicatForOracle无法连接数据库,报错ORA-28547

    因为换了新项目,要用到oracle数据库,但是用Navicat连接oracle不像连接MySql那样简单,连接的时候总是报ORA-28547,最后搜了一下解决方案发现是install client没有 ...

  2. ORACLE查看数据库已安装补丁

    cd $ORACLE_HOME ./opatch lsinventory :}

  3. DOM相关

    归纳一下, 不管是DOM Core还是HTML-DOM,我们在使用JavaScript的时候要注意浏览器之间的兼容性,因为不同的浏览器对这两类方法和属性的支持可能不一样,一般推荐使用DOM Core方 ...

  4. Linux常用基本命令( rmdir, rm, mv )

    1,rmdir,一个很鸡肋的命令,只能删除空目录 ghostwu@dev:~/linux/cp$ ls .txt .txt a a2 a3 ghostwu@dev:~/linux/cp$ rmdir ...

  5. php解释命令行的参数

    php cli模式下,可以用$argc, $argv来读取所有的参数以及个数,如: ghostwu@ghostwu:~/php/php1/1$ cat go1 #!/usr/bin/php <? ...

  6. 5月7日——采用第三方页面内容,但是顶部title使用自己的

          --------->       由A页面进入我的页面 代码如下: (1)A页面下需要添加的代码 (2)我的页面下需要添加的代码 此处用到的语法为mui框架中的语法,可参照mui官方 ...

  7. forever 启动nodejs

    forever可以看做是一个nodejs的守护进程,能够启动,停止,重启我们的app应用. 1.全局安装 forever // 记得加-g,forever要求安装到全局环境下 sudo npm ins ...

  8. vue 实现点击图片放大

    作者QQ:1095737364    QQ群:123300273     欢迎加入! 1.建立子组件,来实现图片方法功能: BigImg.vue <template> <!-- 过渡 ...

  9. influxdb-1.7.2.x86_64安装 install influxdb-1.7.2.x86_64 on RedHat & CentOS

    1.下载安装 wget http://dl.influxdata.com/influxdb/releases/influxdb-1.7.2.x86_64.rpm https://portal.infl ...

  10. MyBatis与JDBC连接数据库所使用的url之间的差异

    在Windows7 系统上安装了MySQL 8.0,然后创建Maven工程,配置pom.xml文件,添加了如下依赖: <dependency> <groupId>org.myb ...