https://github.com/anthonygore/liveframe

Javascript library to help with manipulation of an iframe
https://github.com/anthonygore/liveframe

Last synced: 3 months ago
JSON representation

Javascript library to help with manipulation of an iframe

• Host: GitHub
• URL: https://github.com/anthonygore/liveframe
• Owner: anthonygore
• Created: 2016-01-11T01:52:03.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2016-10-18T15:25:44.000Z (about 8 years ago)
• Last Synced: 2024-10-02T15:41:59.908Z (3 months ago)
• Language: JavaScript
• Size: 11.7 KB
• Stars: 6
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
Liveframe

=========

A simple javascript library to help with manipulation of an iframe. It works by making edits in a dummy DOM before

inserting it into the iframe and re-rendering.

Vanilla JS, no jQuery required.

Use case

--------

Let's say you're creating a live code environment and you want to display the user's input in an iframe:

```javascript

// The 'iframe' object here provides helper functions for creating/updating an iframe

var iframe = new liveframe.Controller();

// Start by creating an actual iframe in the DOM 

//e.g. 


iframe.create(document.getElementById('parent'));


// The 'dummyDom' object is a library of helpers for manipulating an HTML document in preparation for

// insertion into an iframe.

var dummyDom = new liveframe.DummyDom();

var doc = 'My iframe';

// Methods can be chained

dummyDom

    // Initialise it with a string representation of a complete HTML document.

    .html(doc)

    // One advantage of adding a script like this, rather than to a "live" iframe is that it

    // will be called from cache by the browser

    .addScriptHead(null, {src: 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'})

    // This below style/script could be pulled from your live code editor on keyup etc.

    .addStyle('p {color:red; padding-left:50px;}')

    // If you're manipulating an iframe directly you'll likely run in to problems with the

    // ready event, and you'll have to manually remove event handlers etc.

    .addScriptBody('$(document).ready(function(){$("button").click(function(){console.log("test");)});});')

;

// Write to the iframe

iframe.write(dummyDom.html());

```

License

-------

MIT