Skip to content

Instantly share code, notes, and snippets.

@cbertelegni

cbertelegni/generador_iframes.html

Created April 24, 2013 17:57
Show Gist options
  • Save cbertelegni/5454124 to your computer and use it in GitHub Desktop.
Save cbertelegni/5454124 to your computer and use it in GitHub Desktop.
Download ZIP
HTML para generar codigos iframes
Raw
generador_iframes.html
<!-- en desarrollo!!! -->
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Generador de Iframes</title>
<style type="text/css">
body { font-family: arial}
textarea { width: 800px; margin: 30px auto; display: block; padding: 10px; border-radius: 5px; text-align: center; }
iframe { margin: 0 auto}
div#iframe { border: 5px solid #ccc}
div#ctos { margin: 50px 0 0 0; text-align: center; color: #666}
</style>
</head>
<body>
<h1>Generar iframe </h1>
<form name="data_iframe">
<label for="url">Url:</label>
<input type="text" id="url" value="http://" name="url"/>
<label for="ancho">Ancho:</label>
<input type="text" id="ancho" value="645" name="ancho"/>
<label for="alto">Alto:</label>
<input type="text" id="alto" value="640" name="alto"/>
<label for="alto">Scroll:</label>
<select name="scroll">
<option value="no" selected>No</option>
<option value="yes">Si</option>
<option value="auto">Automático</option>
</select>
<button name="boton">Actualizar</button>
</form>
<textarea id="textarea"></textarea>
<h2>Preview</h2>
<div id="iframe">
<iframe id="preview" frameborder="0" width="645" height="300" scrolling="no" src="">&nbsp;</iframe>
</div>
<div id="ctos">Desarrollo: @cbertelegni</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var app= new App("data_iframe");
});
function App(form_name){
var app = this;
app.f = document[form_name];
app.iframe = $("iframe#preview");
app.cont_iframe = $("div#iframe");
app.textarea = $("textarea");
app.f.boton.onclick= function(){
app.actualizar();
return false;
};
app.actualizar= function(){
var attr= {
"width":app.f.ancho.value,
"height":app.f.alto.value,
"src":app.f.url.value,
"scrolling":app.f.scroll.value
};
var iframe_str= '<iframe id="preview" frameborder="0" width="'+attr.width+'" height="'+attr.height+'" scrolling="'+attr.scrolling+'" src="'+attr.src+'">&nbsp;</iframe>';
app.cont_iframe.html(iframe_str);
app.textarea.html(iframe_str);
};
app.textarea.focus(function () {
this.select()
}).mouseup(function (e) {
e.preventDefault()
});
};
</script>
</body>
</html>
@harolito-boop
Copy link

<script>var ezoicId = 137005;</script> <script type="text/javascript" src="//go.ezoic.net/ezoic/ezoic.js"></script>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment