problemas con iframe
Publicado por Mario (1 intervención) el 04/12/2014 21:53:56
Hola amigos, estoy empezando con la programacion en java y he llegado hasta este punto en un programa; y quiero que haga lo siguiente:
Modificar el ejemplo de este tema para que se muestre el URL de cada iframe justo encima de la ventana donde se visualiza su contenido.
- Los URLs irán numerados de forma que cada uno lleve delante el string URL_n, siendo n el índice en el array.
- Añadir ademas un cajetín para introducir un número y un botón que borre el URL con el índice introducido cuando se pulse el botón.
Se recomienda utilizar el método splice(…) para eliminar dicho elemento del array y después volver a repintar la lista de iFrames restantes.
Este es el script y gracias de antemano.
Modificar el ejemplo de este tema para que se muestre el URL de cada iframe justo encima de la ventana donde se visualiza su contenido.
- Los URLs irán numerados de forma que cada uno lleve delante el string URL_n, siendo n el índice en el array.
- Añadir ademas un cajetín para introducir un número y un botón que borre el URL con el índice introducido cuando se pulse el botón.
Se recomienda utilizar el método splice(…) para eliminar dicho elemento del array y después volver a repintar la lista de iFrames restantes.
Este es el script y gracias de antemano.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<style>
iframe { padding:30px; border:5px solid pink;background-color:white;
width:300px; height:350px;}#iframes {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;-webkit-flex-wrap: wrap;
flex-wrap:wrap;
}#marco {
background-color: pink;
padding: 10px; margin: 10px; border: 3px solid black;}</style>
<script type="text/javascript" src="../../../../../Downloads/55-for_iframe 3_files/zepto.js">
</script>
<script type="text/javascript">
$(function(){
var urls = ["http://getbootstrap.com","http://vishub.org"];
function mostrar(urls) {
var i, iframes="";
for (i=0; i < urls.length; ++i) {
iframes += "<iframe src='" + urls[i] + "'></iframe>";
}$('#iframes').html(iframes);
};$("#boton").on('click', function(){
urls.push($('#nuevo').val());
mostrar(urls);
});
mostrar(urls);
});
</script>
</head>
<body>
<h3>Ejemplos de diseño responsivo</h3>
<input id="nuevo" value="Nuevo URL" type="text">
<button type="button" id="boton"> Añadir </button>
<p>
<p>
<p>
</p>
<div id="marco"><div id="iframes"><iframe src="../../../../../Downloads/55-for_iframe 3_files/a.htm"></iframe><iframe src="../../../../../Downloads/55-for_iframe 3_files/a_002.htm"></iframe></div>
</div>
</body>
</html>
- Modulo_7_Final_1.zip(933,0 B)
Valora esta pregunta
0