Dynamically render responsive HTML into iframe.
Download and include dyframe.js to your HTML.
Available on Bower and npm.
- Download: dyframe.js / minified
- Bower:
$ bower install dyframe --save - npm:
$ npm install dyframe --save
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Dyframe</title>
<style>
#dyframe {
width: 360px;
height: 480px;
border: 1px solid #ddd;
}
</style>
</head>
<body>
<div id="dyframe"></div>
<script src="dyframe.js"></script>
<script>
var element = document.getElementById('dyframe');
new Dyframe(element, {
html: '<html><body>Hello, world!</body></html>'
});
</script>
</body>
</html>new Dyframe(element, [options]);element: Target DOM element.options: Options for rendering HTML content.
Type: String
Default: ''
HTML to render.
Set whole HTML code including doctype, <html>, <head> and <body> tag.
Type Number
Default: 980 (px)
Width for HTML rendering.
But if you have profile option, width value will be ignored. (See below)
Type Number | null
Default: null (px)
Device width for HTML rendering.
The HTML scaling can be emulated based on <meta name="viewport"> when you set number.
But if you have profile option, deviceWidth value will be ignored. (See below)
Type: String | null
Default: null
Profile name for device emulation.
When you set proper profile, the scaling will be emulated using profile setting instead of width and deviceWidth option.
You can use the following profiles, or create custom profile using Dyframe.addProfile().
- smartphone:
width: 980, deviceWidth: 375. Same as iPhone 6 portrait. - tablet:
width: 980, deviceWidth: 768. Same as iPad Air 2 portrait.
Tip: Profiled element has additional class df-profile-<name>.
It can be helpful for styling with CSS.
Type: Number
Default: 0 (ms)
Interval to skip rendering.
Frequent re-rendering, such as live HTML preview, could put heavy load on CPU.
To prevent that, you can limit the frequency using this option.
When you set 500 to this option, the actual DOM rendering takes place only once in 500 ms even if .render() method called many times.
Create "dyframe" object before using methods.
var dyframe = new Dyframe(element, options);Re-render the preview content.
If you call this method with argument, the options will be overriden and re-render.
var element = document.getElementById('dyframe');
var dyframe = new Dyframe(element, {
html: '<html><body>Hello, world!</body></html>'
});
setTiemout(funciton () {
// Update HTML content
dyframe.render({
html: '<html><body>Updated!</body></html>'
});
}, 1000);Clean up the target element.
Add custom device profile to the Dyframe global config.
Type: String
Custom profile name.
Type: Object
Custom profile data.
Need to define width and deviceWidth property.
// Add custom profile
Dyframe.addProfile('nexus-6', {
width: 980,
deviceWidth: 412
});
// Render using "nexus-6" profile
new Dyframe(element, {
html: '<html><body>Hello, world!</body></html>',
profile: 'nexus-6'
});Dyframe works on most modern browsers including smart devices.
Tested on the following browsers:
- Internet Explorer (9+)
- Chrome
- Firefox
- Safari
- Opera
- iOS Safari
- Android Browser
- CommonJS
- AMD
Copyright (c) 2015 Hiroyuki Tanjo. Licensed under the MIT License.