phpfail
Regular Member
- Aug 21, 2011
- 236
- 107
Easily iFrame a section of a website and get the code to display it.
If you don't understand Test this code on
http://htmledit.squarefree.com/
If you don't understand Test this code on
http://htmledit.squarefree.com/
Code:
<html><head><meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>
<script type="text/javascript">
var Drag = {};
var gui;
var cut;
var outer;
var IE;
var url;
var site;
var exp;
var fade;
var m={x:0,y:0};
var pan=false;
var mouseDown=false;
var jailbreak;
function init() {
IE = document.all?true:false;
if (!IE) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = getMouseXY;
gui = document.getElementById('gui');
cut = document.getElementById('cut');
outer = document.getElementById('outer');
url = document.getElementById('url');
site = document.getElementById('site');
exp = document.getElementById('export');
fade = document.getElementById('fade');
url.focus();
gui.onmousedown = function () {
url.focus();
mouseDown = true;
exp.style.display = '';
exp.onmouseup = gui.onmouseup = function () {
mouseDown = false;
url.value = url.value.split(' ').join('');
gui.onmousemove = null;
}
var tmpX = m.x;
var tmpY = m.y;
var tmpSiteY = parseInt(site.style.top);
var tmpSiteX = parseInt(site.style.left);
if(!pan) {
outer.style.top = tmpY+"px";
outer.style.left = tmpX+"px";
cut.style.top = -tmpY+parseInt(site.style.top)+"px";
cut.style.left = -tmpX+parseInt(site.style.left)+"px";
cut.style.width = site.offsetWidth+"px";
cut.style.height = site.offsetHeight+"px";
}
gui.onmousemove = function () {
if(pan && mouseDown) {
site.style.top = tmpSiteY+(m.y-tmpY)+"px";
site.style.left = tmpSiteX+(m.x-tmpX)+"px";
cut.style.top = tmpSiteY+m.y-tmpY-parseInt(outer.style.top)+"px";
cut.style.left = tmpSiteX+m.x-tmpX-parseInt(outer.style.left)+"px";
} else {
if(m.y-tmpY<0) {
outer.style.top = m.y+"px";
outer.style.height = (tmpY-m.y)+"px";
outer.style.minHeight = (tmpY-m.y)+"px";
cut.style.top = -m.y+parseInt(site.style.top)+"px";
} else {
outer.style.height = (m.y-tmpY)+"px";
outer.style.minHeight = (m.y-tmpY)+"px";
}
if(m.x-tmpX<0) {
outer.style.left = m.x+"px";
outer.style.width = (tmpX-m.x)+"px";
cut.style.left = -m.x+parseInt(site.style.left)+"px";
} else {
outer.style.width = (m.x-tmpX)+"px";
}
exp.style.top = parseInt(outer.style.top)+parseInt(outer.style.height)+"px";
exp.style.left = parseInt(outer.style.left)+parseInt(outer.style.width)-50+"px";
return false;
}
var wSize = window.size();
cut.style.minHeight = site.style.minHeight = site.style.height = cut.style.height = wSize.height+Math.abs(parseInt(site.style.top))+"px";
site.style.width = cut.style.width = wSize.width+Math.abs(parseInt(site.style.left))+"px";
return false;
}
return false;
}
return false;
}
getMouseXY = function (e) {
if (IE) {
m.x = event.clientX + document.body.scrollLeft;
m.y = event.clientY + document.body.scrollTop;
} else {
m.x = e.pageX;
m.y = e.pageY;
}
if (m.x<0) m.x=0;
if (m.y<0) m.y=0;
return true;
}
window.size = function() {
var w = 0;
var h = 0;
if(!window.innerWidth) {
if(!(document.documentElement.clientWidth == 0)) {
w = document.documentElement.clientWidth;
h = document.documentElement.clientHeight;
} else {
w = document.body.clientWidth;
h = document.body.clientHeight;
}
} else {
w = window.innerWidth;
h = window.innerHeight;
}
return {width:w,height:h};
}
Drag.start = function () {
var elem = document.getElementById('urlbox');
var dX = m.x-parseInt(elem.style.left);
var dY = m.y-parseInt(elem.style.top);
document.body.onmouseup = function () {
Drag.stop(this);
}
document.body.onmousemove = function () {
elem.style.left = m.x-dX+"px";
elem.style.top = m.y-dY+"px";
}
}
Drag.stop = function (elem) {
elem.onmousemove = null;
}
changeurl = function (e) {
var keyCode;
if(window.event) {
keyCode = e.keyCode;
} else if(e.which) {
keyCode = e.which;
}
if(32==keyCode) {
url.value = url.value.split(' ').join('');
} else if(13==keyCode) {
cut.src = url.value;
site.src = url.value;
return false;
}
return true;
}
dopan = function (e) {
var keyCode;
if(window.event) {
keyCode = e.keyCode;
} else if(e.which) {
keyCode = e.which;
}
if(32==keyCode) {
pan=true;
document.body.style.cursor='move';
}
return true;
}
stoppan = function (e) {
pan=false;
document.body.style.cursor='default';
return true;
}
defaultdisabled = function (e) {
if (!e)
event.returnValue = false;
else
e.preventDefault();
return false;
}
genIframe = function () {
var normalCode = "<div style=\"overflow: hidden; width: "+outer.style.width+"; height: "+outer.style.height+"; position: relative;\" id=\"i_div\">\n<iframe name=\"i_frame\" src=\""+url.value+"\" style=\"border: 0pt none ; left: "+cut.style.left+"; top: "+cut.style.top+"; position: absolute; width: "+cut.style.width+"; height: "+cut.style.height+";\" scrolling=\"no\"><\/iframe><\/div>";
if(navigator.userAgent.indexOf("Firefox") != -1) {
var win = window.open('');
var doc = win.document;
doc.open("text/html", "replace");
var normalDisplay = "<h1>Copy & Paste</h1><textarea onclick='select(this);' style=\"width:400px;height:200px;\">"+normalCode+"</textarea><br /><br /><b>Preview:</b><br /><br />"+normalCode;
doc.write(normalDisplay);
doc.close();
} else {
var example = window.open();
if(example) {
var doc = example.contentDocument?example.contentDocument:example.document;
var normalDisplay = doc.createElement('textarea');
normalDisplay.innerText = normalCode;
normalDisplay.style.width = "400px";
normalDisplay.style.height = "200px";
var h2 = doc.createElement('h1');
h2.innerText = 'Copy & Paste;';
doc.body.appendChild(h2);
doc.body.appendChild(normalDisplay);
example.focus();
}
}
return true;
}
</script>
<style type="text/css">
* {margin:0px; padding:0px;font-size:12px;font-family: sans-serif;}
body, div { height:100%;}
#outer {
position:absolute;
left:0px;
top: 0px;
width:250px;
height:250px;
overflow:hidden;
}
a {
color: #3d6d91;
text-decoration: none;
}
.black_overlay{
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.ui_overlay{
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: white;
z-index:1001;
-moz-opacity: 0.0;
opacity:.00;
filter: alpha(opacity=00);
}
</style>
</head><body style="overflow: hidden; width: 100%; height: 100%;" onLoad="init();" ondragstart="return false" onkeydown="return dopan(event);" onkeyup="return stoppan(event);">
<iframe id="site" src="http://www.blackhatworld.com/" style="border: medium none; background: none repeat scroll 0% 0% rgb(255, 255, 255); width: 100%; min-height: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index: 0; -moz-background-inline-policy: continuous;" onmousedown="return defaultdisabled(event);" scrolling="no"></iframe>
<div id="fade" class="black_overlay" style="z-index: 1;" onMouseDown="return defaultdisabled(event);"></div>
<div id="outer" style="border: medium none; width: 100%; height: 100%; position: absolute; top: 313px; left: 451px; z-index: 2;" onMouseDown="return defaultdisabled(event);">
<iframe id="cut" src="http://www.blackhatworld.com/" style="border: medium none; background: none repeat scroll 0% 0% rgb(255, 255, 255); width: 1280px; min-height: 100%; height: 588px; position: absolute; top: -313px; left: -451px; -moz-background-inline-policy: continuous;" onmousedown="return defaultdisabled(event);" scrolling="no"></iframe></div>
<div id="gui" class="ui_overlay" style="z-index: 3;" onMouseDown="return defaultdisabled(event);"></div>
<div id="urlbox" style="border: 0px none; z-index: 4; min-height: 20px; height: 20px; line-height: 20px; position: absolute; top: 0px; left: 0px;"><img style="display: block; float: left;" src="http://i.imgur.com/xWQgM.png" onMouseDown="Drag.start();return defaultdisabled(event);"><input id="url" style="float: left; min-height: 20px; height: 20px; width: 175px;" value="http://www.google.com/" onKeyDown="return changeurl(event);" type="text"></div>
<div id="export" style="z-index: 5; position: absolute; top: 0px; left: 195px;"><input value="Export" style="min-height: 20px; height: 20px; width: 50px;" onClick="genIframe();" type="button"></div>
</body></html>