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. 【mysql】连接的空闲时间超过8小时后 MySQL自动断开该连接解决方案

    1. 增加 MySQL 的 wait_timeout 属性的值.  修改 /etc/mysql/my.cnf文件,在 [mysqld] 节中设置: # Set a connection to wait ...

  2. protocol buffer c#

    第一.打开vs中的Nuget

  3. [Android]Java中点击事件的四种写法

    点击事件的必备条件:实现OnClickListener接口,重写onclick(View v)方法 以拨号简单案例为例,如下图效果: 逻辑流程: 获取点击对象,获取数据 给对象设置监听类 实现OnCl ...

  4. Python爬虫入门教程石家庄链家租房数据抓取

    1. 写在前面 这篇博客爬取了链家网的租房信息,爬取到的数据在后面的博客中可以作为一些数据分析的素材.我们需要爬取的网址为:https://sjz.lianjia.com/zufang/ 2. 分析网 ...

  5. WebGIS裁剪算法-线裁剪多边形

    在gis系统中 经常会用到一些裁剪的方法,首先推荐一个非常好用的空间分析JavaScript库--Turf.js,不仅功能强大.使用简单,同时处理速度也很快. Turf.js中提供了一中多边形的裁剪方 ...

  6. Maven安装本地jar包

    mvn install:install-file -DgroupId=com.oracle -DartifactId=ojdbc14 -Dversion=10.2.0.1.0 -Dpackaging= ...

  7. IE8不能保存cookie,造成response.redirect死循环的原因

    今天发现部分用户的IE8出现登录时死循环,操作系统是windows server 2008. 最后将登录地址:https://www.xxx/login.aspx加到本地intranet站点中,问题解 ...

  8. 表id关联数据获取至页面,制作下拉框多选进行数据多项获取(字段处理)

     这周完成了一张表单,重点碰到以下问题: 1.freemaker获取年份的type值取year,类型直接为Long,传至后台和获取数据不需要转换: 2.freemaker获取日期type值为date, ...

  9. Android逆向 APK文件组成

    一 了解APK文件 我们知道Android系统能运行的程序是.apk文件格式,其实它就是一个压缩包而已,把.apk修改成.zip,然后解压就可以得到该apk内部的文件结构. PS: 既然可以把apk文 ...

  10. Django ModelForm类生成表单

    1. 定义ModelForm类 #froms.py from django import forms from app01.modles import User class UserModelForm ...