iframe-metamask
iframe--require('iframe')
higher level api for creating and removing iframes in browsers
用于创建或移除浏览器中的iframe的更高层次的API
usage
use with browserify
与browserify结合使用，安装：
npm install iframe
var iframe = require('iframe')
// creates a new iframe and appends it to the container，就是把一个<iframe></iframe>添加到id=container的容器中，并在<body></body>中输出hi
frame = iframe({ container: document.querySelector('#container') , body: "hi" })
// completely removes previous iframe from container and generates a new one
frame.setHTML({ body: "bye" })
options
you can pass this into the constructor or setHTML
{
name: name of the iframe,
src: if src url is passed in use that (this mode ignores body/head/html options),
body: string contents for `<body>`
head: string contents for `<head>`
html: string contents for entire iframe
container: (constructor only) dom element to append iframe to, default = document.body
sandboxAttributes: array of capability flag strings, default = ['allow-scripts']
scrollingDisabled: (constructor only) boolean for the iframe scrolling attr
}
you can also just pass in a string and it will be used as {html: 'yourstring'}
security
by default the sandbox attribute is set with 'allow-scripts' enabled. pass in an array of capability flag strings. Available flags:
allow-forms allows form submission.
allow-popups allows (shock!) popups.
allow-pointer-lock allows (surprise!) pointer lock.
allow-same-origin allows the document to maintain its origin; pages loaded from https://example.com/ will retain access to that origin’s data.
allow-scripts allows JavaScript execution, and also allows features to trigger automatically (as they’d be trivial to implement via JavaScript).
allow-top-navigation allows the document to break out of the frame by navigating the top-level window.
gotchas
iframes are weird. here are some things I use to fix weirdness:
loading javascript into iframes
// setTimeout is because iframes report inaccurate window.innerWidth/innerHeight, even after DOMContentLoaded!
var body = '<script type="text/javascript"> setTimeout(function(){' + javascriptCodeHere + '}, 0)</script>'
getting rid of dumb iframe default styles
var head = "<style type='text/css'> html, body { margin: 0; padding: 0; border: 0; } </style>"
实例实现：
iframe.js为：
var iframe = require('iframe')
// creates a new iframe and appends it to the container，就是把一个<iframe></iframe>添加到id=container的容器中，并在<body></body>中输出hi
frame = iframe({ container: document.querySelector('#container') , body: "hi" })
然后使用browserify转换iframe.js为浏览器可用版本iframe-bundle.js，然后在html中调用
browserify iframe.js > iframe-bundle.js
index1.html为：
<!doctype html> <html>
<head>
<title>Iframe Test</title>
</head> <body>
<div id = "container">
</div>
</body> <script src="../iframe-bundle.js"></script>
</html>
然后直接在浏览器中打开html文件
返回结果为，可以看见在页面端把一个<iframe></iframe>添加到id=container的容器中，并在<body></body>中输出hi：
如果添加frame.setHTML({ body: "bye" })
iframe.js为：
var iframe = require('iframe')
// creates a new iframe and appends it to the container，就是把一个<iframe></iframe>添加到id=container的容器中，并在<body></body>中输出hi
frame = iframe({ container: document.querySelector('#container') , body: "hi" })
// completely removes previous iframe from container and generates a new one
// 这个会将上面设置的iframe移除，重新设置一个，可以从输出看见，现在的输出是bye，而不是hi
frame.setHTML({ body: "bye" })
返回结果为：
iframe-metamask的更多相关文章
- mascara-2(MetaMask/mascara本地实现)-连接线上钱包
https://github.com/MetaMask/mascara (beta) Add MetaMask to your dapp even if the user doesn't have t ...
- MetaMask/zero-client
https://github.com/MetaMask/zero-client MetaMask ZeroClient and backing iframe service architecture ...
- 完美判断iframe是否加载完成
var iframe = document.createElement("iframe"); iframe.style.width = "265px"; ifr ...
- js学习笔记：操作iframe
iframe可以说是比较老得话题了,而且网上也基本上在说少用iframe,其原因大致为:堵塞页面加载.安全问题.兼容性问题.搜索引擎抓取不到等等,不过相对于这些缺点,iframe的优点更牛,跨域请求. ...
- 页面嵌入dom与被嵌入iframe的攻防
1.情景一:自己的页面被引入(嵌入)至别人的页面iframe中 if(window.self != window.top){ //url是自己页面的url window.top.location.hr ...
- iframe用法
<iframe src="http://caiyanli.top/" height="500" width="500" frameb ...
- 如何获取url中的参数并传递给iframe中的报表
在使用报表软件时,用户系统左边一般有目录树,点击报表节点就会在右侧网页的iframe中显示出报表,同时点击的时候也会传递一些参数给网页,比如时间和用户信息等.如何使网页中的报表能够获取到传递过来的参数 ...
- JavaScript权威设计--Window对象之Iframe(简要学习笔记十四)
1.Window对象属性的文档元素(id) 如果在HTML文档中用id属性来为元素命名,并且如果Window对象没有此名字的属性,Window对象会赋予一个属性,它的名字是id属性的值,而他们的值指向 ...
- ASP.NET 页面禁止被 iframe 框架引用
两个站点: a.sample.com b.sample.com a.sample.com 站点中的一段示例 JS 代码: var iframe = document.createElement(&qu ...
- 父页面操作iframe子页面的安全漏洞及跨域限制问题
一.父子交互的跨域限制 同域情况下,父页面和子页面可以通过iframe.contentDocument或者parent.document来交互(彼此做DOM操作等,如父页面往子页面注入css). 跨域 ...
随机推荐
- Redis常用数据类型及使用场景
Redis最为常用的数据类型 字符串(String) 字符串列表(list) 字符串集合(set) 哈希(hash) 有序的字符串集合(sorted set) String(字符串) 字符串是最基本的 ...
- php面向对象精要(3)
1,final关键字定义的方法,不能被重写 由于final修饰了show方法,子类中重写show方法会报错 <?php class MyClass { final function show() ...
- SVN查看所有日志提交记录
1. svn默认显示最近一周的文件提交和修改记录,怎么查看更长时间的日志记录呢? 2. TortoiseSVN 3. 点击show all 或者NEXT 100,就可显示更长时间的文件提交记录.
- PHP解决中文乱码
在php中,中文乱码非常头疼,很麻烦,所以根据在编程的经验,总结以下方法(以utf_8为例), 1.php中在头部header设置编码方式 header("Content-type:text ...
- 设计模式(14)--Command(命令模式)--行为型
作者QQ:1095737364 QQ群:123300273 欢迎加入! 1.模式定义: 命令模式属于对象的行为模式.命令模式又称为行动(Action)模式或交易(Transactio ...
- 利用 js-xlsx 实现 Excel 文件导入并解析Excel数据成json格式的数据并且获取其中某列数据
演示效果参考如下:XML转JSON 另一个搭配SQL实现:http://sheetjs.com/sexql/index.html 详细介绍: 1.首先需要导入js <script src=&qu ...
- Flask结合Redis消息队列实现电影弹幕
用到的弹幕播放器插件:dplayer.js(开源) 1.安装Redis 2.安装flask-redis包 pip install flask-redis3.下载dplayer 页面搭建 1.引入资源 ...
- Loadrunner 脚本开发-利用web_custom_request函数进行接口测试
脚本开发-利用web_custom_request函数进行接口测试 by:授客 QQ:1033553122 一.POST + JSON格式参数 例: web_custom_request(" ...
- Expo大作战(十九)--expo打包后，发布分用程序到商店的注意事项
简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人 ...
- Android 监听手机GPS打开状态
转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/70854942 本文出自[赵彦军的博客] GPS_Presenter package ...