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

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

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

const IframeStream = require('iframe-stream').IframeStream

var iframe = createIframe()
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:

const IframeStream = require('iframe-stream').IframeStream
const Dnode = require('dnode') var iframe = createIframe()
var iframeStream = IframeStream(iframe)
var dnode = Dnode()
dnode.on('remote', function(child){
child.doAsyncSomething(function(){
console.log('child finished doing the thing!')
})
}) dnode.pipe(iframeStream).pipe(dnode)

Child:

const ParentStream = require('iframe-stream').ParentStream
const Dnode = require('dnode') var parentStream = ParentStream(iframe)
var dnode = Dnode({
doAsyncSomething: function (cb) {
console.log('doing something async...')
cb()
}
}) dnode.pipe(parentStream).pipe(dnode)
 
源码实现:
var PostMessageStream = require('post-message-stream')

/*
IframeStream starts corked until it gets a message from the iframe
ParentStream starts uncorked
*/ module.exports = {
IframeStream: IframeStream,
ParentStream: ParentStream,
} function IframeStream(iframe) {
if (this instanceof IframeStream) throw Error('IframeStream - Dont construct via the "new" keyword.')
return new PostMessageStream({
name: 'iframe-parent',
target: 'iframe-child',
targetWindow: iframe.contentWindow,
})
} //
// Parent Stream
// function ParentStream() {
if (this instanceof ParentStream) throw Error('ParentStream - Dont construct via the "new" keyword.')
return new PostMessageStream({
name: 'iframe-child',
target: 'iframe-parent',
targetWindow: frames.parent,
})
}
 
下面实例实现:
先将插件安装下来:
npm install iframe --save
npm install iframe-stream --save
npm install dnode --save
 
index.js
const test = require('tape')
const Iframe = require('iframe')
const from = require('from')
const pipe = require('mississippi').pipe
const IframeStream = require('../').IframeStream
const rebundle = require('./rebundle')
const htmlWrap = require('./htmlWrap')
const iframeContent = htmlWrap(rebundle(require('./frame'))) // setup iframe
var iframe = Iframe({
body: iframeContent,
container: document.body,
}).iframe
var iframeStream = IframeStream(iframe) test(function(t) {
var data = [, , , , , , , , ] t.plan(data.length) pipe(
from(data),
iframeStream
) // create a test for each datum
// this is because these streams never close
eachOutput(iframeStream, data.map(function(datum){
return function onResult(result){ t.equal(result, datum * , 'datum was doubled correctly') }
}), function onDone(){
t.end()
}) }) function eachOutput(stream, handlers, cb) {
var index =
if (!handlers.length) return cb()
stream.once('data', handleChunk)
function handleChunk(data){
var fn = handlers[index]
fn(data)
index++
if (!handlers[index]) return cb()
stream.once('data', handleChunk)
}
}

htmlWrap.js

module.exports = htmlWrap

function htmlWrap(src){
return '<'+'script type="text/javascript"'+'>'+src+'<'+'/script'+'>'
}

rebundle.js

//
// Extraced from WebWorkify
// https://github.com/substack/webworkify/blob/master/index.js
// var bundleFn = arguments[];
var sources = arguments[];
var cache = arguments[]; var stringify = JSON.stringify; module.exports = function (fn, options) {
var wkey;
var cacheKeys = Object.keys(cache); for (var i = , l = cacheKeys.length; i < l; i++) {
var key = cacheKeys[i];
var exp = cache[key].exports;
// Using babel as a transpiler to use esmodule, the export will always
// be an object with the default export as a property of it. To ensure
// the existing api and babel esmodule exports are both supported we
// check for both
if (exp === fn || exp && exp.default === fn) {
wkey = key;
break;
}
} if (!wkey) {
wkey = Math.floor(Math.pow(, ) * Math.random()).toString();
var wcache = {};
for (var i = , l = cacheKeys.length; i < l; i++) {
var key = cacheKeys[i];
wcache[key] = key;
}
sources[wkey] = [
Function(['require','module','exports'], '(' + fn + ')(self)'),
wcache
];
}
var skey = Math.floor(Math.pow(, ) * Math.random()).toString(); var scache = {}; scache[wkey] = wkey;
sources[skey] = [
Function(['require'], (
// try to call default if defined to also support babel esmodule
// exports
'var f = require(' + stringify(wkey) + ');' +
'(f.default ? f.default : f)(self);'
)),
scache
]; var workerSources = {};
resolveSources(skey); function resolveSources(key) {
workerSources[key] = true; for (var depPath in sources[key][]) {
var depKey = sources[key][][depPath];
if (!workerSources[depKey]) {
resolveSources(depKey);
}
}
} var src = '(' + bundleFn + ')({'
+ Object.keys(workerSources).map(function (key) {
return stringify(key) + ':['
+ sources[key][]
+ ',' + stringify(sources[key][]) + ']'
;
}).join(',')
+ '},{},[' + stringify(skey) + '])'
; return src
}

frame.js

const BrowserStdout = require('browser-stdout')
const ParentStream = require('../index.js').ParentStream
const transform = require('mississippi').through
const pipe = require('mississippi').pipe module.exports = setupStream setupStream() function setupStream(opts) {
var iframeStream = ParentStream()
pipe(
iframeStream,
transform({ objectMode: true }, doubleIt),
iframeStream
)
} function doubleIt(chunk, encoding, cb){
cb(null, chunk * )
}

上面的例子是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. Python 进阶必备函数

    1. lambda 表达式 匿名函数(英语:anonymous function)是指一类无需定义标识符(函数名)的函数.通俗来说呢,就是它可以让我们的函数,可以不需要函数名. 正常情况下,我们定义一 ...

  2. MySql处理函数

    Lower(name) 转换为小写 Upper(name)转换为大写 Substr(name,length,index):从index开始截取length个字符串 Length(name) 获取长度 ...

  3. 地区picker 各选择器,优劣分析

    移动端选择器picker有很多,各大ui组件都有自己的picker,比如light7,HUI,MUI,jqueryUI等等.但是,我发现他们都有各种各样的问题.这次的地区选择,需要地区的省份+市+经纬 ...

  4. js-ES6学习笔记-Proxy(2)

    1.has方法用来拦截HasProperty操作,即判断对象是否具有某个属性时,这个方法会生效.典型的操作就是in运算符. var handler = { has (target, key) { if ...

  5. paste 命令

    Linux paste命令用于合并文件的列. paste指令会把每个文件以列对列的方式,一列列地加以合并. 语法: paste [-s][-d <间隔字符>][--help][--vers ...

  6. Android 限定符

    Android中一些常见的限定符可以参考下表. 使用最小宽度限定符 在上一小节中我们使用large限定符成功解决了单页双页的判断问题,不过很快又有一个新的问题出现了,large到底是指多大呢?有的时候 ...

  7. 【转】使用windeployqt.exe进行依赖查找打包

    原文:https://blog.csdn.net/u011822862/article/details/52166940 Qt 官方开发环境使用的动态链接库方式,在发布生成的可执行程序时,需要复制可执 ...

  8. Web Api通过文件流下载文件到本地实例

    最近项目里面需要和C++的客户端互动,其中一个接口就是需要提供文件下载的接口,保证C++项目调用这个接口的时候能够正常下载文件到本地.参考了一下网上的代码,其原理就是读取服务器上指定路径的文件流,并将 ...

  9. 为什么不建议给域名裸域添加CNAME记录

    很多提供权威 DNS 解析的服务商都不提供域名裸域又叫根域(root record)的 CNAME 解析,有些即使提供了也会在你添加裸域的 CNAME 记录时给你一个警告提醒. 万网的权威 DNS 解 ...

  10. Python数据类型之list和tuple

    list是一种有序的集合,可以随时添加和删除其中的元素. 用len()函数可以获得list元素的个数. 用索引来访问list中每一个位置的元素,索引是从0开始的.如果要取最后一个元素,除了计算索引位置 ...