Skip to content

Instantly share code, notes, and snippets.

@hiteshjoshi
Created February 4, 2017 06:52
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hiteshjoshi/bbebd9553173f8f63c7e4c0124ec318b to your computer and use it in GitHub Desktop.
Save hiteshjoshi/bbebd9553173f8f63c7e4c0124ec318b to your computer and use it in GitHub Desktop.
mithriljs iframe on the fly
const proxy = function(vnode){
var doc = vnode.dom.contentDocument || vnode.dom.contentWindow.document;
if (doc.readyState === "complete") {
m.render( vnode.dom.contentDocument.documentElement, vnode.children )
} else{
setTimeout(function(){proxy(vnode);},0);
}
}
const Iframe = {
oncreate : proxy,
onupdate : proxy,
view : vnode =>
m( 'iframe', vnode.attrs )
}
m.mount( document.body, {
input : 'Hello',
view : vnode => [
m( 'style', 'body{margin:0;}' ),
m( Iframe, {
style : {
border : 0,
height : '100%',
width : '100%',
position : 'absolute',
background : 'rgb(' + [0,0,0].map(() => (Math.random() * 256).toFixed()) + ')'
}
},
['h1','h2','h3','h4','h5','h6','p'].map( el =>
m( el, vnode.state.input )
)
),
m( 'input', {
style : {
border : 0,
display : 'block',
boxSizing: 'border-box',
padding : '1em',
fontSize : '2em',
position : 'fixed',
bottom : '1em',
left : '1em',
width : 'calc( 100vw - 2em )'
},
placeholder : 'Write some stuff',
oninput : e =>
vnode.state.input = e.target.value,
value : vnode.state.input
} )
]
} )
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://unpkg.com/mithril@1.0.0"></script>
<script src="iframe.js"></script>
</head>
<body>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment