iframe-metamask

時間 2019-11-16

標籤 iframe metamask 欄目 HTML 简体版

原文原文鏈接

iframe--require('iframe')

higher level api for creating and removing iframes in browsersjavascript

用於建立或移除瀏覽器中的iframe的更高層次的APIcss

usage

use with browserifyhtml

與browserify結合使用，安裝：html5

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 setHTMLjava

{
  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'}node

security

by default the sandbox attribute is set with 'allow-scripts' enabled. pass in an array of capability flag strings. Available flags:npm

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:api

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爲：app

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" })

返回結果爲：

更多相關文章...

相關標籤/搜索

HTML

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。