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的更多相关文章

  1. mascara-2(MetaMask/mascara本地实现)-连接线上钱包

    https://github.com/MetaMask/mascara (beta) Add MetaMask to your dapp even if the user doesn't have t ...

  2. MetaMask/zero-client

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

  3. 完美判断iframe是否加载完成

    var iframe = document.createElement("iframe"); iframe.style.width = "265px"; ifr ...

  4. js学习笔记：操作iframe

    iframe可以说是比较老得话题了,而且网上也基本上在说少用iframe,其原因大致为:堵塞页面加载.安全问题.兼容性问题.搜索引擎抓取不到等等,不过相对于这些缺点,iframe的优点更牛,跨域请求. ...

  5. 页面嵌入dom与被嵌入iframe的攻防

    1.情景一:自己的页面被引入(嵌入)至别人的页面iframe中 if(window.self != window.top){ //url是自己页面的url window.top.location.hr ...

  6. iframe用法

    <iframe src="http://caiyanli.top/" height="500"  width="500" frameb ...

  7. 如何获取url中的参数并传递给iframe中的报表

    在使用报表软件时,用户系统左边一般有目录树,点击报表节点就会在右侧网页的iframe中显示出报表,同时点击的时候也会传递一些参数给网页,比如时间和用户信息等.如何使网页中的报表能够获取到传递过来的参数 ...

  8. JavaScript权威设计--Window对象之Iframe(简要学习笔记十四)

    1.Window对象属性的文档元素(id) 如果在HTML文档中用id属性来为元素命名,并且如果Window对象没有此名字的属性,Window对象会赋予一个属性,它的名字是id属性的值,而他们的值指向 ...

  9. ASP.NET 页面禁止被 iframe 框架引用

    两个站点: a.sample.com b.sample.com a.sample.com 站点中的一段示例 JS 代码: var iframe = document.createElement(&qu ...

  10. 父页面操作iframe子页面的安全漏洞及跨域限制问题

    一.父子交互的跨域限制 同域情况下,父页面和子页面可以通过iframe.contentDocument或者parent.document来交互(彼此做DOM操作等,如父页面往子页面注入css). 跨域 ...

随机推荐

  1. 【JVM】5、JVM内存管理机制

    转自:http://blog.csdn.net/lengyuhong/article/details/5953544 近期看了看Java内存泄露的一些案例,跟原来的几个哥们讨论了一下,深入研究发现JV ...

  2. 小希的迷宫（hdu1272）并查集（有点坑）

    纪念我死去的脑细胞们    .....   小希的迷宫 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java ...

  3. putty连接ubuntu：network error:connection refused

    原因: ubuntu存在一个bug:在/var/run/目录下缺少一个文件夹sshd 解决方法: 在命令行输入: sudo mkdir /var/run/sshd sudo /usr/sbin/ssh ...

  4. 使用memcache对wordpress优化,提速

    环境: 一个本地开发环境 一个部署在虚拟机中( 虚拟机安装memcache缓存),然后用这个优化的版本跟本地开发环境对比. wordpress版本:4.9.5 php:5.6版本 1,首先在主题的fu ...

  5. 排序算法(5)--Selection Sorting--选择排序[2]--Heap Sort--堆排序

    1.基本思想 具有n个元素的序列 (h1,h2,...,hn),当且仅当满足(hi>=h2i,hi>=2i+1)或(hi<=h2i,hi<=2i+1) (i=1,2,...,n ...

  6. css翻译名词术语

    原文 本书译法 其它译法(未采用) CSS - 层叠样式表.级联样式表.样式单 cascade 层叠(机制) 级联 fallback 回退(机制.措施.方案) 后备.回落.降级 selector 选择 ...

  7. OSGI企业应用开发（五）使用Blueprint整合Spring框架（二）

    上篇文章中,我们开发了一个自定义的Bundle,接着从网络中下载到Spring和Blueprint的Bundle,然后复制到DynamicRuntime项目下. 需要注意的是,这些Bundle并不能在 ...

  8. php用smarty来做简易留言系统，明细步骤简单操作

    留言信息是之前用php做过的一个例子,现在把它用smarty模板来做 大概是这样子 点击发布信息 然后填写内容,发送后会返回表格,写的内容都会出现在表格里 数据库的数据是这样的: 先建两个文件.php ...

  9. Oracle数据库 插入数据格式，简单查询

    操作练习代码,知识点往下翻 TRUNCATE TABLE hehe1111; select * from hehe1111; desc hehe1111; ,'); ,'); ,'); ,'); ,' ...

  10. MySQL 8.0.2: Introducing Window Functions

    July 18, 2017MySQL, SQLDag Wanvik MySQL 8.0.2 introduces SQL window functions, or analytic functions ...