JSFiddle - React, Tailwind, and code Playground

by meyertee

HTML

<iframe id="ref"></iframe>
<div id="positioned"></div>
<div id="out">ddd</div>

CSS

#ref{
    position:absolute;
    top:0;
    left:0;
    width: 200px;
    height: 200px;
    border:none;
}

#positioned{
    position:absolute;
    width: 100px;
    height: 100px;
    background-color: black;
}

#out{
    position: absolute;
    top: 2px;
    left: 2px;
}

JavaScript

var iframe = $("#ref")[0];
var iframeWindow = iframe.contentWindow;
var iframeDoc = iframe.contentDocument || iframeWindow.document;
iframeDoc.write("<!doctype html><html><body>");
var iframeBody =  iframeDoc.body;

$(iframeBody).css({
	"width" : "400px",
	"height" : "400px",
    "background-color": "lightblue"
});

$("#positioned").position({
	my : "center",
	at : "center",
	of : iframeWindow
});

$("#out").text($(iframeWindow).width() + "x" + $(iframeWindow).height() + " vs " + iframeWindow.innerWidth + "x" + iframeWindow.innerHeight);