JSFiddle - React, Tailwind, and code Playground

by danmana

HTML

<iframe id="source" src="http://fiddle.jshell.net"></iframe>

CSS

#source{
    border: 1px solid red;
}

/*this css class is not visible in the iframe*/
.hover{
    color:red;
}

JavaScript

var doc = window.frames['source'].document;

//only this css style will be visible in the iframe
$('head', doc).append('<style type="text/css">.hover{background-color:#fdd;}</style>');

//include in the iframe any styles that are in this page
//without this the addClass does not work
$('head',doc).append($('style, link[rel=stylesheet]').clone());


$(doc).ready(function() {
    $('body').prepend('This is outside the iframe<br>');
    $('body', doc).prepend('This is inside the iframe<br><b>hover me/click me</b><br>');
    $('body',doc).live('click',function(){
        alert('click');
    });
    $('body', doc).delegate('*', 'hover', function() {
        $(this).addClass('hover');
        $(this).css('textDecoration', 'underline');
    });
    $('body', doc).delegate('*', 'mouseout', function() {
        $(this).removeClass('hover');
        $(this).css('textDecoration', 'none');
    });
});